Back to Bootstrap HubPractice BootstrapInterview Bootstrap

Nearby lessons

20 of 39
BS5 CardsBS5 DropdownsBS5 CollapseBS5 NavsBS5 Navbar

📁 BS5 Collapse

📌 What Is Bootstrap 5 Collapse?

Collapse toggles content visibility. The element to show/hide has .collapse and an id. The trigger has data-bs-toggle="collapse" and data-bs-target="#id" (or href="#id"). Requires Bootstrap’s JavaScript.

📁 Basic Collapse (.collapse, data-bs-toggle, data-bs-target)

.collapse – hides the element by default. .show – shows it (add when open). Trigger: data-bs-toggle="collapse" and data-bs-target="#yourId" point to the element’s id.

Example02
Loading editor…

📂 Accordion (.accordion, .accordion-item, .accordion-header, .accordion-collapse, .accordion-body)

.accordion – wrapper. .accordion-item – each section. .accordion-header – contains the trigger button. .accordion-button – the clickable header (add .collapsed when closed). .accordion-collapse .collapse – the panel. .accordion-body – content inside the panel. Use data-bs-parent="#accordionId" so only one section is open at a time.

Example03
Loading editor…

✅ Collapse Best Practices

  • Give the collapsible element a unique id and reference it in data-bs-target or href.
  • Use data-bs-parent on accordion panels so only one is open at a time.
  • Use .accordion-button.collapsed for closed state and remove .collapsed when open.

🧠 Test Your Knowledge

3 Questions
Progress: 0 / 3