Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Collapse in Bootstrap 5
Collapse: Toggle the visibility of content with a few classes and JavaScript.
Basic Collapse
Click the buttons below to show and hide another element via class changes.
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<!-- Basic Collapse -->
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample">
Toggle content
</button>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Collapsible content goes here.
</div>
</div>Multiple Targets
A button or a can show and hide multiple elements by referencing them with a selector in its href or data-bs-target attribute.
Some placeholder content for the first collapse component of this multi-collapse example.
Some placeholder content for the second collapse component of this multi-collapse example.
<!-- Multiple Targets --> <button type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse"> Toggle both </button> <div class="collapse multi-collapse" id="collapse1"> <!-- Content 1 --> </div> <div class="collapse multi-collapse" id="collapse2"> <!-- Content 2 --> </div>
Accordion Example
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
<!-- Accordion -->
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">
Content for accordion item.
</div>
</div>
</div>
<!-- More items -->
</div>Horizontal Collapse
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
<!-- Horizontal Collapse -->
<button type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample">
Toggle width
</button>
<div class="collapse collapse-horizontal" id="collapseWidthExample">
<div class="card card-body" style="width: 300px;">
Content for horizontal collapse.
</div>
</div>Collapse with Different Triggers
Content collapsed by card header button.
List Group Trigger
Content collapsed by list group item.
Collapse with Icons
Content with icon indicator. The icon rotates when collapsed/expanded.
Nested Collapse
Nested collapse content.
JavaScript Methods
Collapse JavaScript API
Methods
toggle()- Toggles a collapsible elementshow()- Shows a collapsible elementhide()- Hides a collapsible elementdispose()- Destroys a collapse elementgetInstance()- Static method to get collapse instancegetOrCreateInstance()- Static method to get or create instance
Events
show.bs.collapse- Fires immediately when show instance method is calledshown.bs.collapse- Fired when a collapse element has been made visiblehide.bs.collapse- Fires immediately when hide method is calledhidden.bs.collapse- Fired when a collapse element has been hidden
JavaScript Examples
// Get collapse instance
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse)
// Toggle collapse
bsCollapse.toggle()
// Show collapse
bsCollapse.show()
// Hide collapse
bsCollapse.hide()
// Event listeners
myCollapse.addEventListener('show.bs.collapse', function () {
console.log('Collapse is showing')
})
myCollapse.addEventListener('shown.bs.collapse', function () {
console.log('Collapse is shown')
})Practical Examples
Example: FAQ Section
Getting started is easy! Just sign up for an account and follow our onboarding guide.
Yes, we offer a 14-day free trial with all features included.
Example: Settings Panel
Accessibility
Accessibility Best Practices
- Use
aria-expandedto indicate state - Include
aria-controlsto link trigger to content - Ensure keyboard navigation works
- Provide sufficient color contrast
- Use semantic HTML elements
- Consider screen reader users with
aria-label
Best Practices
Do's
- ✅ Use for collapsible content sections
- ✅ Include clear trigger labels
- ✅ Add visual indicators for state
- ✅ Make it keyboard accessible
- ✅ Use for FAQ sections
- ✅ Consider mobile touch targets
Don'ts
- ❌ Don't use for critical content
- ❌ Avoid too many nested levels
- ❌ Don't hide too much content
- ❌ Avoid confusing trigger placement
- ❌ Don't forget aria attributes
- ❌ Avoid auto-expanding on page load (unless default state)
Custom CSS Examples
Custom Collapse Styles
/* Custom collapse styles */
.custom-collapse .card-body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 0.5rem;
}
.custom-collapse .btn {
border-radius: 0.5rem;
transition: all 0.3s;
}
.custom-collapse .btn[aria-expanded="true"] {
background-color: #764ba2;
color: white;
}
/* Animated icon */
.collapse-icon {
transition: transform 0.3s ease;
}
.collapsed .collapse-icon {
transform: rotate(180deg);
}
/* Smooth transitions */
.collapsing {
transition: height 0.35s ease;
}