🔽 Bootstrap 5 – Collapse: Toggle Visibility with Smooth Transitions

🧲 Introduction – What Is Collapse in Bootstrap 5?

The collapse component in Bootstrap 5 allows you to show and hide content with a smooth slide-down/up animation. It’s useful for toggling menus, hiding advanced form options, and creating accordions. Powered by Bootstrap’s JavaScript, it works with minimal HTML.

🎯 In this guide, you’ll learn:

• How to toggle content with buttons or links
• Use .collapse with id and data-bs-toggle
• Control default visibility with .show
• Create simple collapsibles and accordion structures

---

✅ Example 1 – Basic Collapse with Button

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Toggle Content
  </a>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    This content toggles with a smooth animation.
  </div>
</div>

🔍 Explanation:

• data-bs-toggle="collapse": Enables the toggle behavior
• href="#collapseExample": Points to the target collapsible element
• aria-controls, aria-expanded: Accessibility support
• .collapse: The collapsible area
• .show: Adds open state (remove to start closed)

---

✅ Example 2 – Collapse with Button and data-bs-target

<button class="btn btn-success" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapse">
  Toggle More Info
</button>

<div class="collapse mt-2" id="multiCollapse">
  <div class="card card-body">
    This section uses `data-bs-target` instead of `href`.
  </div>
</div>

🔍 Tip:

• Use data-bs-target="#id" with buttons and href="#id" with links

---

✅ Example 3 – Start with Visible Collapse (Default Open)

<div class="collapse show" id="openByDefault">
  <div class="card card-body">
    This collapse starts in an open state.
  </div>
</div>

🔍 Explanation:

• .show: Applied to .collapse makes the section visible on load

---

✅ Example 4 – Multiple Collapse Targets with One Button

<button class="btn btn-warning" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse">
  Toggle All
</button>

<div class="row mt-3">
  <div class="col">
    <div class="collapse multi-collapse">
      <div class="card card-body">Box 1</div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse">
      <div class="card card-body">Box 2</div>
    </div>
  </div>
</div>

🔍 Use Case:

• Use shared class names for controlling multiple collapses with one control

---

🛠️ Best Practices for Bootstrap 5 Collapse

Tip	Why It Helps
Use aria-controls and aria-expanded	Improves accessibility for screen readers
Don’t nest .collapse unnecessarily	Prevents unpredictable behavior
Wrap content inside .card-body or padding div	Ensures spacing and styling consistency
Use .show wisely	Only on the default open section
Combine with .accordion for structured content	Helps organize collapsible data better

---

📌 Summary – Collapse Content Cleanly in Bootstrap

The Bootstrap 5 Collapse component gives you a lightweight way to hide/show elements, control UI clutter, and enhance interactivity. Use it for FAQs, toggleable descriptions, side filters, or advanced form sections.

🔍 Key Takeaways:

• Use data-bs-toggle="collapse" and href or data-bs-target to toggle
• Add .collapse and optionally .show to the content block
• Use buttons, links, or icons to trigger collapse elements
• Multiple targets can be collapsed simultaneously using class selectors

⚙️ Ideal for collapsible sections in FAQs, sidebars, navbars, and settings panels.

---

❓ FAQs – Bootstrap 5 Collapse

❓ Can I collapse multiple sections with one button?
✅ Yes. Use a common class like .multi-collapse and target that class.

---

❓ How do I make a collapse visible by default?
✅ Add .show to the .collapse element to open it on load.

---

❓ What’s the difference between data-bs-target and href?
✅ Use data-bs-target with buttons and href with links. Both should point to the ID of the .collapse element.

---

❓ Do I need JavaScript to use collapse?
✅ Yes. Bootstrap’s JavaScript bundle (or Collapse plugin) is required for toggling functionality.

---

Share Now :