آموزش طراحی سایت-کار با Collapse در بوت استرپ 4

سلام با آموزش Bootstrap 4 در خدمت شما هستیم در قسمت قبل با مفاهیم زیر آشنا شدیم

• آموزش کار با منوی کرکره ای Dropdown در Bootstrap4
• حال با ادامه آموزش بوت استرپ 4 از دوره آموزش طراحی سایت همراه باشید:

آیتم های باز و بسته شونده (Collapse) در مواقعی که می خواهید حجم زیادی محتوا یا Content را مخفی یا مجددا نمایان کنید، کاربرد دارند.

مثال عملی: در کد مثال زیر، یک آیتم با کلاس Collapse تعریف شده که متنی درون آن است. با زدن روی دکمه Button که توسط خواص data-toggle و data-target به آیتم Collapse متصل شده اند، متن نمایان و مخفی می شود :

مثال 1

<button data-toggle=&quotcollapse&quot data-target=&quot#demo&quot>Collapsible</button>

<div id=&quotdemo&quot class=&quotcollapse&quot>

Lorem ipsum dolor text....

</div>

توضیح مثال: آیتم با کلاس Collapse (در این مثال تگ div)، نمایانگر آیتم مخفی و نمایان شونده است. محتویات آیتم div با کلیک بر روی دکمه button، مخفی و نمایان می شود.

برای کنترل آیتم Collapse و نمایش یا عدم نمایش آن، بایستی خاصیت data-toggle=” Collapse” را درون یک تک لینک a یا دکمه button قرار دهید. سپس مقدار خاصیت data-target آیتم را برابر با id آیتم Collapse (در اینجا تگ div که id آن demo است)، قرار دهید.

نکته :

در المنت لینک a، می توانید از خاصیت href آن به جای خاصیت data-target استفاده کنید، همانند مثال زیر:

مثال 2

<p><a href=&quot#demo&quot>Collapsible</a></p>

<div class=&quotcollapse&quot id=&quotdemo&quot>Lorem ipsum dolor text....</div>

نکته :

به صورت پیش فرض، آیتم Collapse در ابتدا مخفی است ولی می توانید با افزودن کلاس show به آن، در شروع کار، آیتم را در حالت نمایش ایجاد کنید، همانند مثال عملی زیر:

مثال 3

<div id=&quotdemo&quot class=&quotcollapse show&quot>

Lorem ipsum dolor text....

</div>

آموزش کار با accordion در بوت استرپ 4:

از accordion در Bootstrap 4 می توانید برای ایجاد یک یا چندین آیتم لیست وار استفاده کنید، که هر یک اژ آن ها را می توانید با کلیک بر روی یک دکمه یا لینک، باز و بسته کرده و مخفی و نمایان کنید.

در کد مثال عملی زیر، یک accordion را به همراه استفاده از Card هایی که قابلیت جدیدی در بوت استرپ 4 هستند، ایجاد کرده ایم.

عنصر مادر accordion یک تگ div باid معادل accordion است كه هريك از آیتم های درون آن، توسط یک div با کلاس Card تعریف شده است :

مثال 4

<div id=&quotaccordion&quot>

  <div class=&quotcard&quot>

    <div class=&quotcard-header&quot>

      <a class=&quotcard-link&quot data-toggle=&quotcollapse&quot href=&quot#collapseOne&quot>

        Collapsible Group Item #1

      </a>

    </div>

    <div id=&quotcollapseOne&quot class=&quotcollapse show&quot data-parent=&quot#accordion&quot>

      <div class=&quotcard-body&quot>

        Lorem ipsum..

      </div>

    </div>

  </div>

  <div class=&quotcard&quot>

    <div class=&quotcard-header&quot>

      <a class=&quotcollapsed card-link&quot data-toggle=&quotcollapse&quot href=&quot#collapseTwo&quot>

        Collapsible Group Item #2

      </a>

    </div>

    <div id=&quotcollapseTwo&quot class=&quotcollapse&quot data-parent=&quot#accordion&quot>

      <div class=&quotcard-body&quot>

        Lorem ipsum..

      </div>

    </div>

  </div>

  <div class=&quotcard&quot>

    <div class=&quotcard-header&quot>

      <a class=&quotcollapsed card-link&quot data-toggle=&quotcollapse&quot href=&quot#collapseThree&quot>

        Collapsible Group Item #3

      </a>

    </div>

    <div id=&quotcollapseThree&quot class=&quotcollapse&quot data-parent=&quot#accordion&quot>

      <div class=&quotcard-body&quot>

        Lorem ipsum..

      </div>

    </div>

  </div>

</div>

نکته :

در صورتی که مقدار خاصیت data-parent تمامی آیتم ها را برابر با id عنصر مادر accordion قرار دهید، در صورت باز و بسته کردن یک آیتم، سایر آیتم ها به صورت خودکار بسته خواهند شد.