Accordion and Collapse

🎭 Bootstrap Accordion & Collapse: The Magic Drawer Story

Imagine you have a magical dresser. Each drawer can open and close with just a tap. Sometimes only one drawer opens at a time, and sometimes many can be open together. That’s exactly what Accordion and Collapse do for your website!

🌟 The Big Picture

Think of a Collapse as a single drawer that opens and closes.

Think of an Accordion as a smart dresser where opening one drawer automatically closes the others.

Simple, right? Let’s explore each magical drawer!

📦 1. Accordion - The Polite Dresser

What Is It?

An Accordion is like a stack of drawers where only one can be open at a time. When you open a new drawer, the previous one closes automatically. Very polite!

Why Use It?

• Shows a lot of information in a small space
• Keeps things organized and tidy
• Users focus on one thing at a time

The Simple Example

<div class="accordion" id="myAccordion">
  <!-- First Item -->
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#panelOne">
        🍎 Fruits
      </button>
    </h2>
    <div id="panelOne"
         class="accordion-collapse collapse show"
         data-bs-parent="#myAccordion">
      <div class="accordion-body">
        Apples, bananas, and oranges!
      </div>
    </div>
  </div>

  <!-- Second Item -->
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#panelTwo">
        🥕 Vegetables
      </button>
    </h2>
    <div id="panelTwo"
         class="accordion-collapse collapse"
         data-bs-parent="#myAccordion">
      <div class="accordion-body">
        Carrots, broccoli, and peas!
      </div>
    </div>
  </div>
</div>

🔑 Key Parts

💡 The Secret Sauce

The magic happens with data-bs-parent="#myAccordion". This tells Bootstrap: “Hey, when I open, close my siblings!”

🚪 2. Collapse - The Simple Drawer

What Is It?

A Collapse is just ONE drawer. It opens. It closes. That’s it! No rules about other drawers.

The Simple Example

<!-- The Button (Toggle) -->
<button class="btn btn-primary"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#myContent">
  Open the Drawer! 🚪
</button>

<!-- The Hidden Content -->
<div class="collapse" id="myContent">
  <div class="card card-body">
    🎉 Surprise! Here's the hidden treasure!
  </div>
</div>

How It Works

graph TD
    A["User Clicks Button"] --> B{Is Drawer Open?}
    B -->|No| C["Drawer Opens 📂"]
    B -->|Yes| D["Drawer Closes 📁"]
    C --> E["Content Visible"]
    D --> F["Content Hidden"]

🎯 Two Ways to Toggle

Method 1: Using data-bs-target

<button data-bs-toggle="collapse"
        data-bs-target="#example">
  Click Me
</button>

Method 2: Using href (for links)

<a href="#example"
   data-bs-toggle="collapse">
  Click Me
</a>

↔️ 3. Collapse Horizontal - The Sideways Drawer

What Is It?

Normal collapse goes up-down like an elevator. Horizontal collapse slides left-right like a sliding door!

The Simple Example

<button class="btn btn-info"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#slidePanel">
  Slide It! ↔️
</button>

<div class="collapse collapse-horizontal"
     id="slidePanel">
  <div class="card card-body"
       style="width: 200px;">
    I slide from the side! 🎢
  </div>
</div>

🔑 The Magic Word

Add collapse-horizontal class. That’s it!

<div class="collapse collapse-horizontal">

⚠️ Important Rule

For horizontal collapse, your content needs a fixed width. Otherwise, it won’t know how much to slide!

<div style="width: 200px;">
  Your content here
</div>

🎯 4. Collapse Multiple Targets - The Group Toggle

What Is It?

One button that controls many drawers at once! Like a master switch that opens all the lights.

The Simple Example

<!-- One Button, Multiple Targets -->
<button class="btn btn-success"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target=".multi-collapse">
  Toggle All! 🎪
</button>

<!-- First Drawer -->
<div class="collapse multi-collapse"
     id="drawer1">
  <div class="card card-body">
    Drawer 1 Content 📦
  </div>
</div>

<!-- Second Drawer -->
<div class="collapse multi-collapse"
     id="drawer2">
  <div class="card card-body">
    Drawer 2 Content 📦
  </div>
</div>

🔑 The Secret

Use a class selector with a dot:

data-bs-target=".multi-collapse"

All elements with class multi-collapse will toggle together!

💡 Mix and Match

You can also have individual controls plus a master switch:

<!-- Master Control -->
<button data-bs-target=".multi-collapse">
  Toggle All
</button>

<!-- Individual Controls -->
<button data-bs-target="#drawer1">
  Toggle Drawer 1
</button>
<button data-bs-target="#drawer2">
  Toggle Drawer 2
</button>

❌ 5. Close Button - The Exit Door

What Is It?

A special button that looks like an X and dismisses things. Used in alerts, modals, and anywhere you need a “go away” button.

The Simple Example

<!-- Basic Close Button -->
<button type="button"
        class="btn-close"
        aria-label="Close">
</button>

🎨 Close Button Variants

Default (Dark X)

<button class="btn-close"></button>

White X (for dark backgrounds)

<button class="btn-close btn-close-white"></button>

Disabled Close Button

<button class="btn-close" disabled></button>

🔗 Close Button + Collapse

Want the X to close a collapse? Add the dismiss attribute:

<div class="alert alert-warning
            alert-dismissible fade show">
  <strong>Hey!</strong> I can be closed!
  <button type="button"
          class="btn-close"
          data-bs-dismiss="alert">
  </button>
</div>

Common Uses

🧠 Quick Memory Tricks

graph TD
    A["Need Collapsible Content?"] --> B{How Many Sections?}
    B -->|Just One| C["Use Collapse"]
    B -->|Multiple, One at a Time| D["Use Accordion"]
    B -->|Multiple, All Together| E["Use Multiple Targets"]

    C --> F{Which Direction?}
    F -->|Up/Down| G["Regular Collapse"]
    F -->|Left/Right| H["Collapse Horizontal"]

🎯 The Complete Cheat Code

Accordion Formula

Container (accordion + id)
  └── Items (accordion-item)
       ├── Header (accordion-header)
       │    └── Button (data-bs-target + data-bs-toggle)
       └── Panel (accordion-collapse + data-bs-parent)
            └── Body (accordion-body)

Collapse Formula

Toggle Button (data-bs-toggle="collapse" + data-bs-target)
  └── Target Content (collapse + id)

Multiple Targets Formula

Toggle Button (data-bs-target=".classname")
  └── Target 1 (collapse + classname)
  └── Target 2 (collapse + classname)
  └── Target N (collapse + classname)

🚀 You’re Ready!

Now you understand Bootstrap’s magical drawers:

Go build something amazing! 🎉