📂 Bootstrap 5 – Accordion: Create Expandable & Collapsible Sections

🧲 Introduction – What Is an Accordion in Bootstrap 5?

An accordion is a vertically stacked list of items, each containing a header and a collapsible content section. It allows users to show or hide content without navigating away from the current page. Bootstrap 5 provides a ready-made accordion component powered by Collapse JavaScript.

🎯 In this guide, you’ll learn:

• How to create a functional accordion
• Add multiple items with individual toggles
• Control default open/close states
• Use it in FAQs, content toggles, or sidebar filters

---

✅ Example – Basic Accordion with Three Items

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse"
        data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show"
      aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        This is the first item's accordion content.
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
        data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse"
      aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        This is the second item's accordion content.
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
        data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse"
      aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        This is the third item's accordion content.
      </div>
    </div>
  </div>
</div>

---

🔍 Code Explanation:

Element/Class	Purpose
.accordion	Wraps all accordion items
.accordion-item	Contains each toggleable section
.accordion-header	Defines clickable title area
.accordion-button	Button that toggles visibility
.accordion-collapse	The collapsible content container
collapse show / collapse	Controls visibility (open by default with .show)
data-bs-parent="#accordion"	Ensures only one item is open at a time (optional if multiple open OK)

---

✅ Add Custom Styling & Icons (Optional)

You can use icons or Font Awesome inside the button:

<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#customCollapse">
  <i class="bi bi-plus-lg me-2"></i> Custom Icon Accordion
</button>

---

✅ Example – Allow All Items to Stay Open (No data-bs-parent)

Remove the data-bs-parent attribute to let users open multiple items simultaneously.

<div class="accordion" id="accordionMulti">
  <!-- accordion-item(s) without data-bs-parent -->
</div>

---

🛠️ Best Practices for Bootstrap Accordions

Tip	Why It Matters
Use unique IDs for each heading/collapse	Prevents toggle conflicts
Use .show only for the default open item	Maintains clean UX
Keep content concise	Avoid overwhelming the user with too much hidden info
Combine with icons or headers	Improves discoverability and UX
Don’t nest accordions unnecessarily	Reduces complexity and performance issues

---

📌 Summary – Bootstrap Accordions for Clean Collapsible Content

Bootstrap 5 accordions help you organize large chunks of information into expandable blocks, improving readability and page flow. They’re perfect for FAQs, settings panels, product filters, or onboarding content.

🔍 Key Takeaways:

• Use .accordion, .accordion-item, and .accordion-button for structure
• Add data-bs-toggle="collapse" and data-bs-target="#id" to toggle content
• Control visibility using .collapse and .show
• Use data-bs-parent to enforce single-item open logic

⚙️ Ideal for documentation, filter panels, user dashboards, and help sections.

---

❓ FAQs – Bootstrap 5 Accordion

❓ Can I open multiple accordion items at the same time?
✅ Yes. Just remove the data-bs-parent attribute from each .accordion-collapse.

---

❓ How do I make one item open by default?
✅ Add the class .show to the target .accordion-collapse section and remove collapsed from its button.

---

❓ Is the accordion accessible?
✅ Yes. Bootstrap includes aria-* attributes for screen readers and keyboard navigation.

---

❓ Can I use accordions without JavaScript?
❌ No. Accordions rely on Bootstrap’s JavaScript Collapse plugin.

---

Share Now :