Bootstrap 5 Collapse
Bootstrap 5 Collapse is a JavaScript-powered utility that toggles the visibility of content by expanding and collapsing it with a smooth height transition. It is triggered by a button or anchor element using the data-bs-toggle='collapse' attribute paired with a target ID or href. Use it whenever you need to hide secondary content until the user requests it — such as FAQs, filter panels, or supplementary details — keeping the interface uncluttered without navigating away.
Primary Class
.collapseCommon Use Cases
- →FAQ sections where each question expands inline to reveal the answer, reducing page scroll length and letting users find answers without leaving the page
- →Product filter sidebars on e-commerce sites that collapse filter groups (size, colour, price) so mobile users aren't overwhelmed by a wall of options
- →Step-by-step onboarding checklists where each completed step collapses to show only the active task, giving users a sense of progress
- →Admin dashboard panels that hide advanced configuration settings behind a 'Show advanced options' toggle, keeping the default view clean for non-technical users
Variants & Classes
| Variant | Description |
|---|---|
| Collapse Default | Standard collapse with Bootstrap's default styling. |
| Collapse Responsive | Responsive variant that adapts to different screen sizes. |
Code Example
<p><button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#shippingDetails" aria-expanded="false" aria-controls="shippingDetails">View Shipping Information</button></p><div class="collapse" id="shippingDetails"><div class="card card-body"><h6 class="fw-semibold mb-2">Standard Shipping — 3 to 5 Business Days</h6><p class="mb-1">Free on all orders over £40. Orders placed before 2pm GMT are dispatched the same day.</p><p class="mb-0">Express next-day delivery is available at checkout for £4.99.</p></div></div>
Live Examples
Basic Collapse
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Canvas Builder generated collapse with custom colours
- ✓Collapse with interactive states
- ✓Responsive collapse for all screen sizes
Best Practices
Use aria-expanded for accessible toggles
Always include aria-expanded='false' on your trigger element — Bootstrap automatically updates this to 'true' when the panel opens, giving screen readers accurate state information without any extra JavaScript.
Trigger one collapse from multiple buttons
You can point several buttons at the same collapse target by giving each the same data-bs-target value. This is useful for 'Read more' links that appear both above and below a content block.
Show content by default without JavaScript
Add the 'show' class alongside 'collapse' (i.e., class='collapse show') to render the panel open on page load. Users who disable JavaScript still see the content, and Bootstrap will manage the toggle state from that open position.
Animate height transitions with custom CSS
Bootstrap's collapse transition duration is set via the CSS variable --bs-transition-collapse-duration (defaults to 0.35s). Override it on your .collapse element to speed up or slow down the animation to match your brand's motion style.