Nearby lessons
20 of 39📁 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.
📂 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.
✅ Collapse Best Practices
- Give the collapsible element a unique
idand reference it in data-bs-target orhref. - 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 QuestionsProgress: 0 / 3
Keep Going!BS5 Navs