Bootstrap Collapse
The Collapse component lets you show and hide chunks of content with a smooth sliding animation. It is perfect for FAQ answers, expandable panels, and mobile navigation. Like dropdowns, collapse is powered by Bootstrap's bundled JavaScript, but instead of a floating menu it toggles the visibility of an element that stays in the normal page flow. In this lesson you will trigger a collapse with a button, target it correctly, and combine several collapses into an accordion.
Triggering a Collapse
A collapse needs two things: a trigger and a target. The trigger is any button or link with data-bs-toggle="collapse", and it points at the target using data-bs-target set to the target's id (a link can use href instead). The target is the element you want to reveal, marked with the .collapse class.
A button that collapses content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#moreInfo" aria-expanded="false" aria-controls="moreInfo">
Toggle details
</button>
<div class="collapse" id="moreInfo">
<div class="card card-body">
Here is some content that appears and disappears with a smooth animation.
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Showing Content by Default
If you want a panel to start open, add the .show class alongside .collapse on the target. Bootstrap will render it expanded on page load, and the trigger will collapse it on the first click.
Starting expanded
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<a class="btn btn-outline-secondary" data-bs-toggle="collapse" href="#openPanel" role="button" aria-expanded="true" aria-controls="openPanel">
Hide notice
</a>
<div class="collapse show" id="openPanel">
<div class="card card-body">
This panel is visible when the page loads.
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Toggling Multiple Targets
A single trigger can control several elements at once. Give each target a shared class name and point data-bs-target at that class selector. One click then opens or closes every matching element together.
- data-bs-toggle="collapse" — marks the element as a collapse trigger
- data-bs-target="#id" — points a button at its target by id
- href="#id" — an alternative target for links
- .collapse — the target starts hidden
- .collapse.show — the target starts visible
Building an Accordion
An accordion is a group of collapsible panels where opening one closes the others. Bootstrap ships dedicated accordion classes for this. The key is the data-bs-parent attribute, which links each panel back to the accordion wrapper so only one stays open at a time.
A two-item accordion
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="accordion" id="faq">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#q1" aria-expanded="true">
What is Bootstrap?
</button>
</h2>
<div id="q1" class="accordion-collapse collapse show" data-bs-parent="#faq">
<div class="accordion-body">A front-end toolkit for building responsive sites.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#q2" aria-expanded="false">
Is it free?
</button>
</h2>
<div id="q2" class="accordion-collapse collapse" data-bs-parent="#faq">
<div class="accordion-body">Yes, Bootstrap is open source and free to use.</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Collapse is one of the most reused patterns on the web. Once you are comfortable with the trigger-and-target pairing, everything from FAQs to sidebars becomes easy to build.
Exercise: Bootstrap Collapse
What actually triggers a Bootstrap collapse element to show or hide?
