تابز مدیا | آموزش قدم به قدم برنامه نویسی

Collapse

📌 Collapse یکی از کامپوننت‌های بوت‌استرپ هست که بهت اجازه میده بخش‌هایی از محتوا (مثل متن یا منو) رو به صورت باز و بسته (نمایش/مخفی) مدیریت کنی.
این کامپوننت معمولاً در آکاردئون (Accordion) و منوهای موبایل استفاده میشه.

✅ Collapse ساده (نمایش/مخفی کردن متن)


<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#demo">
  باز/بسته کردن متن
</button>

<div id="demo" class="collapse mt-3">
  این یک متن نمونه است که با کلیک روی دکمه نمایش یا مخفی می‌شود.
</div>

✅ Collapse پیش‌فرض باز (با کلاس `.show`)


<a class="btn btn-success" data-bs-toggle="collapse" href="#openCollapse">
  متن همیشه باز
</a>

<div id="openCollapse" class="collapse show mt-3">
  این بخش به صورت پیش‌فرض باز است.
</div>

✅ Collapse چندتایی (کنترل چند بخش با یک دکمه)


<p>
  <a class="btn btn-info" data-bs-toggle="collapse" href="#c1">بخش ۱</a>
  <a class="btn btn-warning" data-bs-toggle="collapse" href="#c2">بخش ۲</a>
</p>

<div id="c1" class="collapse">
  محتوای بخش ۱
</div>
<div id="c2" class="collapse">
  محتوای بخش ۲
</div>

✅ آکاردئون (Accordion با Collapse)

📌 فقط یکی از بخش‌ها در هر لحظه باز میشه:


<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
        بخش اول
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        محتوای بخش اول
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
        بخش دوم
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        محتوای بخش دوم
      </div>
    </div>
  </div>
</div>

✅ Collapse با دکمه و لینک


<p>
  <a class="btn btn-dark" data-bs-toggle="collapse" href="#multiCollapse">باز/بسته با لینک</a>
  <button class="btn btn-danger" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapse">
    باز/بسته با دکمه
  </button>
</p>

<div class="collapse" id="multiCollapse">
  <div class="card card-body">
    این متن را می‌توان هم با لینک و هم با دکمه باز و بسته کرد.
  </div>
</div>

📌 نکته مهم: برای اینکه Collapse کار کنه باید جاوااسکریپت بوت‌استرپ رو لود کرده باشی: