آکاردئون ها | CORK الگوی مدیریتی تمام ریسپانسیو

پایه ای بدون فاصله آیکون ها بدون آیکون

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.

<div id="toggleAccordion">
    <div class="card">
        <div class="card-header" id="...">
            <section class="mb-0 mt-0">
                <div role="menu" class="collapsed" data-toggle="collapse" data-target="#defaultAccordionOne" aria-expanded="true" aria-controls="defaultAccordionOne">
                    مورد #1  <div class="icons"><svg> ... </svg></div>
                </div>
            </section>
        </div>

        <div id="defaultAccordionOne" class="collapse" aria-labelledby="..." data-parent="#toggleAccordion">
            <div class="card-body">
            
                .......................
                .......................

            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header" id="...">
            <section class="mb-0 mt-0">
                <div role="menu" class="" data-toggle="collapse" data-target="#defaultAccordionTwo" aria-expanded="false" aria-controls="defaultAccordionTwo">
                    مورد #2  <div class="icons"><svg> ... </svg></div>
                </div>
            </section>
        </div>
        <div id="defaultAccordionTwo" class="collapse show" aria-labelledby="..." data-parent="#toggleAccordion">
            <div class="card-body">
            
                .......................
                .......................

            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header" id="...">
            <h5 class="mb-0 mt-0">
                <div role="menu" class="collapsed" data-toggle="collapse" data-target="#defaultAccordionThree" aria-expanded="false" aria-controls="defaultAccordionThree">
                مورد #3 <div class="icons"><svg> ... </svg></div>
            </div>
            </h5>
        </div>
        <div id="defaultAccordionThree" class="collapse" aria-labelledby="..." data-parent="#toggleAccordion">
            <div class="card-body">

                .......................
                .......................

            </div>
        </div>
    </div>
</div>

اضافه کردن .no-outer-spacing کلاس در والدین div از div.card عنصر.

<div id="withoutSpacing" class="no-outer-spacing">
    <div class="card">
        <div class="card-header" id="headingOne2">
            <section class="mb-0 mt-0">
                <div role="menu" class="" data-toggle="collapse" data-target="#withoutSpacingAccordionOne" aria-expanded="true" aria-controls="withoutSpacingAccordionOne">
                    مورد #1  <div class="icons"><svg> ... </svg></div>
                </div>
            </section>
        </div>

        <div id="withoutSpacingAccordionOne" class="collapse show" aria-labelledby="headingOne2" data-parent="#withoutSpacing">
            <div class="card-body">
                
                ................
                ................

            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header" id="headingTwo4">
            <section class="mb-0 mt-0">
                <div role="menu" class="collapsed" data-toggle="collapse" data-target="#withoutSpacingAccordionTwo" aria-expanded="false" aria-controls="withoutSpacingAccordionTwo">
                    مورد #2  <div class="icons"><svg> ... </svg></div>
                </div>
            </section>
        </div>
        <div id="withoutSpacingAccordionTwo" class="collapse" aria-labelledby="headingTwo4" data-parent="#withoutSpacing">
            <div class="card-body">

                ................
                ................

            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingThree4">
            <section class="mb-0 mt-0">
                <div role="menu" class="collapsed" data-toggle="collapse" data-target="#withoutSpacingAccordionThree" aria-expanded="false" aria-controls="withoutSpacingAccordionThree">
                    مورد #3 <div class="icons"><svg> ... </svg></div>
                </div>
            </section>
        </div>
        <div id="withoutSpacingAccordionThree" class="collapse" aria-labelledby="headingThree4" data-parent="#withoutSpacing">
            <div class="card-body">
                    
                ................
                ................

            </div>
        </div>
    </div>
</div>

اضافه کردن div.accordion-icon با svg آیکون داخل آن قرار دارد.

<div id="iconsAccordion" class="accordion-icons">
    <div class="card">
        <div class="card-header" id="...">
            <section class="mb-0 mt-0">
                <div role="menu" class="collapsed" data-toggle="collapse" data-target="#iconAccordionOne" aria-expanded="true" aria-controls="iconAccordionOne">
                    <div class="accordion-icon"><svg> ... </svg></div>
                    مورد #1  <div class="icons"><svg> ... </svg></div>
                </div>
            </section>
        </div>

        <div id="iconAccordionOne" class="collapse" aria-labelledby="..." data-parent="#iconsAccordion">
            <div class="card-body">
                
                ..................
                ..................

            </div>
        </div>
  </div>

    <div class="card">
        <div class="card-header" id="...">
            <section class="mb-0 mt-0">
                <div role="menu" class="collapsed" data-toggle="collapse" data-target="#iconAccordionTwo" aria-expanded="false" aria-controls="iconAccordionTwo">
                    <div class="accordion-icon"><svg> ... </svg></div>
                    مورد #2  <div class="icons"><svg> ... </svg></div>
                </div>
            </section>
        </div>
        <div id="iconAccordionTwo" class="collapse" aria-labelledby="..." data-parent="#iconsAccordion">
            <div class="card-body">

                ...................
                ...................

            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="...">
            <section class="mb-0 mt-0">
                <div role="menu" class="" data-toggle="collapse" data-target="#iconAccordionThree" aria-expanded="false" aria-controls="iconAccordionThree">
                    <div class="accordion-icon"><svg> ... </svg></div>
                    مورد #3 <div class="icons"><svg> ... </svg></div>
                </div>
            </section>
        </div>
        <div id="iconAccordionThree" class="collapse show" aria-labelledby="..." data-parent="#iconsAccordion">
        <div class="card-body">
            
            ..................
            ..................

        </div>
        </div>
    </div>
</div>

حذف div.icons به طور کامل و همچنین (در صورت لزوم) حذف کنید div.accordion-iconاستفاده کنید

<div id="toggleAccordion">
    <div class="card">
        <div class="card-header" id="...">
            <section class="mb-0 mt-0">
                <div role="menu" class="collapsed" data-toggle="collapse" data-target="#defaultAccordionOne" aria-expanded="true" aria-controls="defaultAccordionOne">
                    مورد #1
                </div>
            </section>
        </div>

        <div id="defaultAccordionOne" class="collapse" aria-labelledby="..." data-parent="#toggleAccordion">
            <div class="card-body">
            
                .......................
                .......................

            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header" id="...">
            <section class="mb-0 mt-0">
                <div role="menu" class="" data-toggle="collapse" data-target="#defaultAccordionTwo" aria-expanded="false" aria-controls="defaultAccordionTwo">
                    مورد #2
                </div>
            </section>
        </div>
        <div id="defaultAccordionTwo" class="collapse show" aria-labelledby="..." data-parent="#toggleAccordion">
            <div class="card-body">
            
                .......................
                .......................

            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header" id="...">
            <section class="mb-0 mt-0">
                <div role="menu" class="collapsed" data-toggle="collapse" data-target="#defaultAccordionThree" aria-expanded="false" aria-controls="defaultAccordionThree">
                مورد #3
            </div>
            </section>
        </div>
        <div id="defaultAccordionThree" class="collapse" aria-labelledby="..." data-parent="#toggleAccordion">
            <div class="card-body">

                .......................
                .......................

            </div>
        </div>
    </div>
</div>

محسن رضایی

هومن شکیبا

زهرا جوان

اولیه

بدون فاصله

آیکون ها

بدون آیکون