جمع شونده (Collapse)

در بوت استرپ، «جمع شونده (Collapse)» بخش هایی را پنهان و آشکار می کند. به درد متن های بلند می خورد. «داده-ویژگی (Data Attribute)» یعنی تنظیم با صفت های data-* روی تگ ها. تمرکز ما «کالپس بوت استرپ» است.

کالپس ساده (Basic Collapse)

با یک دکمه، یک جعبه متن را باز و بسته کن. ویژگی data-bs-toggle="collapse" فعالش می کند. با data-bs-target به بخش هدف وصل شو.

<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo">
  کلیک کن
</button>
<div id="demo" class="collapse">
  متن نمونه...
</div>

مشاهده در ادیتور

نکته: تگ مقصد باید id یکتا داشته باشد. نام id را در data-bs-target بنویس.

لینک به جای دکمه

اگر لینک می خواهی، از <a> استفاده کن. به جای data-bs-target می توانی href با همان #id بدهی. رفتارش یکسان است.

<a href="#demo" data-bs-toggle="collapse" class="btn btn-outline-primary">
  باز و بسته کن
</a>
<div id="demo" class="collapse">
  متن نمونه...
</div>

مشاهده در ادیتور

نمایش پیش فرض با کلاس show

به صورت پیش فرض پنهان است. اگر می خواهی از ابتدا باز باشد، کلاس show را کنار collapse بگذار.

<div id="demo" class="collapse show">
  این متن از اول باز است.
</div>

مشاهده در ادیتور

آکاردئون (Accordion) با یک بازشو

«آکاردئون (Accordion)» یعنی فقط یک بخش باز باشد. با data-bs-parent این قانون را اجرا کن. بقیه بخش ها خودکار بسته می شوند.

<div id="accordion">
  <div class="card">
    <div class="card-header">
      <a class="btn" data-bs-toggle="collapse" href="#collapseOne">
        آیتم شماره 1
      </a>
    </div>
    <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
      <div class="card-body">
        متن نمونه برای آیتم 1.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
        آیتم شماره 2
      </a>
    </div>
    <div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        متن نمونه برای آیتم 2.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
        آیتم شماره 3
      </a>
    </div>
    <div id="collapseThree" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        متن نمونه برای آیتم 3.
      </div>
    </div>
  </div>
</div>

مشاهده در ادیتور

گام های سریع راه اندازی

1. Bootstrap 5 را در پروژه اضافه کن.
2. یک تریگر با data-bs-toggle بساز.
3. برای هدف، id یکتا تعیین کن.
4. کلاس های collapse و شاید show را بگذار.
5. برای آکاردئون، data-bs-parent را تنظیم کن.

هشدار: اگر آیتم باز نمی شود، id و مقدار data-bs-target یا href را یکی کن.

لینک های تکمیلی و ادامه یادگیری

برو سراغ درآپ داون ها یا ناوبری تا «کالپس بوت استرپ» را ترکیب کنی.

مستند رسمی Collapse را ببین. همچنین نمونه های Accordion را بررسی کن.

جمع بندی سریع

• کالپس، محتوا را باز و بسته می کند.
• تریگر با data-bs-toggle فعال می شود.
• data-bs-target یا href به #id وصل است.
• show محتوای باز اولیه می دهد.
• data-bs-parent آکاردئون می سازد.