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.
Bootstrap 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 and classes
| Variant | Description and classes |
|---|---|
| Button trigger | A button shows and hides one panel.btn + data-bs-toggle="collapse" + data-bs-target |
| Open by default | Panel starts expanded.collapse show |
| Horizontal | Animates width instead of height.collapse collapse-horizontal |
| Multiple targets | One trigger toggles several panels.data-bs-target=".multi-collapse" |
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 template variants
Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:
- 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.