What is a Collapsible Panel?¶
In web design, a “Collapse” (collapsible panel) is a common interactive component that hides large amounts of content, which only expands when clicked by the user. This saves page space and keeps the interface clean. Examples include FAQ lists, expandable product details modules, etc.
Why Choose Bootstrap 5 Collapsible Panels?¶
Bootstrap 5 provides ready-to-use collapse components. You don’t need to write complex JavaScript code—just use simple HTML class names and data attributes to achieve expand/collapse effects. It also easily extends to advanced interactions like “accordion” patterns.
1. Preparation: Import Bootstrap 5¶
To use Bootstrap 5 collapsible panels, first include Bootstrap 5’s CSS and JavaScript files in your HTML. Import CSS first, then JavaScript (order matters).
<!-- Import Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Import Bootstrap 5 JS (depends on Popper.js) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
2. Basic Collapsible Panel: One Trigger, One Panel¶
The simplest collapsible panel has two parts: a trigger button (click to expand/collapse) and collapsible content (hidden by default).
Code Example:¶
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 Collapsible Panel</title>
<!-- Import Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">
<!-- Trigger Button -->
<button class="btn btn-primary"
data-bs-toggle="collapse" <!-- Mark as a collapse trigger -->
data-bs-target="#demoPanel"> <!-- Link to the panel's ID -->
Click to Expand Content
</button>
<!-- Collapsible Content -->
<div class="collapse mt-2" id="demoPanel"> <!-- "collapse" class hides content by default -->
This is the content to collapse! For example, a long text, image, or list.
<ul class="mt-2">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<!-- Import Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Key Parameter Explanation:¶
data-bs-toggle="collapse": Tells Bootstrap this is a collapse trigger.data-bs-target="#demoPanel": Specifies the ID of the target panel (use#to reference the panel’sid).class="collapse": Hides content by default; toggles visibility when clicked.class="show"(optional): Add this to the collapsible content to show it by default.
3. Accordion Effect: Mutually Exclusive Panels¶
An “accordion” is a common variant where only one panel can be expanded at a time. Clicking a new panel automatically collapses the previously expanded one. This is done by specifying a shared parent container with data-bs-parent.
Code Example:¶
<div class="accordion" id="accordionExample"> <!-- Parent container for the accordion -->
<!-- Panel 1 -->
<div class="accordion-item mb-2">
<h2 class="accordion-header">
<button class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseOne"
data-bs-parent="#accordionExample"> <!-- Link to the parent container -->
Panel Title 1
</button>
</h2>
<div class="accordion-collapse collapse" id="collapseOne"> <!-- Collapsible content -->
<div class="accordion-body">
Detailed content for Panel 1...
</div>
</div>
</div>
<!-- Panel 2 -->
<div class="accordion-item mb-2">
<h2 class="accordion-header">
<button class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseTwo"
data-bs-parent="#accordionExample">
Panel Title 2
</button>
</h2>
<div class="accordion-collapse collapse" id="collapseTwo">
<div class="accordion-body">
Detailed content for Panel 2...
</div>
</div>
</div>
</div>
Key Points:¶
accordionclass: Marks the parent container as an accordion.accordion-itemclass: Wraps each panel for grouping.accordion-headerclass: Contains the panel title and button.data-bs-parent="#accordionExample": Ensures only one panel is expanded at a time.
4. Styling and Customization¶
Bootstrap 5 collapsible panels support easy styling via built-in classes, such as modifying button colors or adding icons.
Custom Button Color:¶
Change the button class to modify its color (e.g., replace btn-primary with btn-success):
<button class="accordion-button btn-success" ...>
Add Icons (Optional):¶
Use Bootstrap Icons or Font Awesome to indicate expand/collapse states. For example:
<button class="accordion-button" ...>
<i class="bi bi-chevron-down me-2"></i> <!-- Bootstrap Icons (down arrow) -->
Panel Title 1
</button>
The arrow automatically rotates when the panel expands (controlled by Bootstrap’s CSS).
5. Summary¶
Bootstrap 5 collapsible panels use simple data attributes and class names:
1. Trigger Button: data-bs-toggle="collapse" + data-bs-target="#xxx"
2. Collapsible Content: class="collapse" + optional class="show"
3. Accordion Effect: Use data-bs-parent to mutually expand multiple panels.
Applications include FAQs, product details, navigation menus, etc. This approach saves space while improving user experience.
Notes¶
- Ensure
data-bs-targetordata-bs-parentIDs match the collapsible content’sidexactly. - Place Bootstrap 5 JS at the end of the HTML to avoid functional issues.
- For dynamic panels, use JavaScript to manually call
show()/hide()methods.
With these steps, you’ve mastered Bootstrap 5 collapsible panels. Start coding and try it out!