Bootstrap 5 collapse shows and hides content with a smooth CSS height transition. This page covers 4 collapse patterns — basic toggle, multi-target, FAQ list and card sections.
Quick Setup
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
Key Classes Reference
| Class / Attribute | What It Does |
|---|---|
.collapse | Hides the element by default |
.collapse.show | Visible by default |
data-bs-toggle="collapse" | Marks the trigger element |
data-bs-target="#id" | Points to the collapsible element |
.multi-collapse | Class for multi-target collapse |
1. Basic Bootstrap 5 Collapse
Simple show/hide toggle using data-bs-toggle='collapse'. No JavaScript needed.
2. Bootstrap 5 Multi-Target Collapse
One button controlling multiple collapse elements, and multiple buttons controlling one element.
3. Bootstrap 5 FAQ Collapse
FAQ-style collapse list where each item expands independently.
4. Bootstrap 5 Card Collapse Sections
Collapsible card sections — useful for settings panels and expandable content areas.
Frequently Asked Questions
Bootstrap collapse uses the data-bs-toggle='collapse' attribute on the trigger element and data-bs-target pointing to the collapsible element's ID. Bootstrap JS listens for clicks and toggles the show class, which controls a CSS height transition from 0 to auto.
Add the show class to the collapse element: <div class='collapse show' id='myCollapse'>. This starts it in the open state. Users can still toggle it closed.
Create a Collapse instance and call show, hide or toggle: const collapse = new bootstrap.Collapse(document.getElementById('myCollapse')); collapse.show(). Or get an existing instance: bootstrap.Collapse.getInstance(element).toggle().
Collapse is the base component — it toggles any element's visibility. Accordion is built on top of collapse using data-bs-parent to close other items when one opens. If you need only one item open at a time use accordion. For independent toggles use collapse directly.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.