📌 جلسه سیزدهم – کامپوننت‌ها – Collapse (آکاردئون منو) و Dropdown Menu

✅ مباحث اصلی

• Collapse (باز و بسته شدن بخش‌ها)
  • استفاده برای نمایش یا مخفی‌سازی محتوای متنی یا لیست‌ها

  • ساختار پایه:

     

    <a class="btn btn-primary" data-toggle="collapse" href="#demo">لینک</a>
    <div id="demo" class="collapse">محتوا</div>
    

  • کلاس‌های کلیدی:
    • .collapse → محتوای مخفی‌شونده
    • .collapse.show → حالت باز
  • می‌توان به صورت Accordion استفاده کرد:
    • چند بخش باز و بسته که فقط یکی فعال است
    • معمولاً با استفاده از data-parent در ساختار آکاردئون

• Dropdown Menu (منوی کشویی)
  • برای ساخت منوهای بازشونده در دکمه‌ها یا ناوبری

  • ساختار پایه:

     

    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
        منو
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">لینک ۱</a>
        <a class="dropdown-item" href="#">لینک ۲</a>
      </div>
    </div>
    

  • کلاس‌های کلیدی:
    • .dropdown → کانتینر اصلی
    • .dropdown-toggle → دکمه‌ی بازکننده
    • .dropdown-menu → محتوای منو
    • .dropdown-item → آیتم‌های منو
  • امکان استفاده از divider (.dropdown-divider) و header (.dropdown-header) در داخل منو

✅ کلاس‌های کلیدی جلسه

• Collapse:
  • .collapse / .collapse.show
  • data-toggle="collapse"
  • data-parent (برای آکاردئون)
• Dropdown:
  • .dropdown
  • .dropdown-toggle
  • .dropdown-menu
  • .dropdown-item
  • .dropdown-divider, .dropdown-header

⚡ نکته: هم collapse و هم dropdown نیاز به جاوااسکریپت بوت‌استرپ + jQuery + Popper.js دارن تا درست کار کنن.