Welcome to The Coding College! In this guide, we’ll explore the Bootstrap 4 JavaScript Collapse component, which is perfect for creating expandable and collapsible sections of content. The collapse component is widely used for menus, FAQs, and hiding/showing content dynamically.
What Is the Bootstrap Collapse Component?
The collapse component allows you to toggle the visibility of content using buttons, links, or other triggers. By default, the content is hidden and expands when triggered, with smooth animations handled by Bootstrap’s JavaScript.
1. Basic Collapse Example
You can create a simple collapse element using the .collapse class and data-toggle="collapse" attribute.
Example:
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Toggle Content
</button>
<div class="collapse" id="collapseExample">
<div class="card card-body">
This is some collapsible content. Click the button to hide or show it.
</div>
</div>2. Accordion with Collapse
To create an accordion (a group of collapsible elements where only one can be open at a time), wrap your elements in a parent container and use data-parent.
Example:
<div id="accordionExample">
<div class="card">
<div class="card-header">
<h5>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordionExample">
<div class="card-body">
This is the content of the first accordion item.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordionExample">
<div class="card-body">
This is the content of the second accordion item.
</div>
</div>
</div>
</div>3. Multiple Targets
You can link a single button to multiple collapse elements by listing multiple targets in the data-target attribute.
Example:
<button class="btn btn-info" type="button" data-toggle="collapse" data-target="#multiCollapse1, #multiCollapse2" aria-expanded="false" aria-controls="multiCollapse1 multiCollapse2">
Toggle Both
</button>
<div class="row">
<div class="col">
<div class="collapse" id="multiCollapse1">
<div class="card card-body">
First collapsible content.
</div>
</div>
</div>
<div class="col">
<div class="collapse" id="multiCollapse2">
<div class="card card-body">
Second collapsible content.
</div>
</div>
</div>
</div>4. Controlling Collapse with JavaScript
Bootstrap provides JavaScript methods to control collapsible elements programmatically.
JavaScript Methods
| Method | Description |
|---|---|
.collapse('toggle') | Toggles the visibility of the collapsible item. |
.collapse('show') | Shows the collapsible item. |
.collapse('hide') | Hides the collapsible item. |
Example:
<button id="toggleBtn" class="btn btn-warning">Toggle Programmatically</button>
<div class="collapse" id="jsCollapse">
<div class="card card-body">
This content is controlled programmatically.
</div>
</div>
<script>
document.getElementById('toggleBtn').addEventListener('click', function () {
$('#jsCollapse').collapse('toggle');
});
</script>5. Transition Events
Bootstrap’s collapse component emits events during transitions, such as when the collapsible element is about to show or hide.
| Event | Description |
|---|---|
show.bs.collapse | Fired when the element is about to be shown. |
shown.bs.collapse | Fired when the element is fully shown. |
hide.bs.collapse | Fired when the element is about to be hidden. |
hidden.bs.collapse | Fired when the element is fully hidden. |
Example: Listening for Events
<div class="collapse" id="eventCollapse">
<div class="card card-body">
This collapsible content triggers events.
</div>
</div>
<script>
$('#eventCollapse').on('show.bs.collapse', function () {
console.log('Collapse is about to be shown.');
});
$('#eventCollapse').on('hidden.bs.collapse', function () {
console.log('Collapse is fully hidden.');
});
</script>6. Advanced Customizations
Bootstrap’s collapse component can be further customized using CSS or by combining it with other components such as cards, buttons, or modals.
Example: Collapsible Sidebar
<button class="btn btn-dark" type="button" data-toggle="collapse" data-target="#sidebar" aria-expanded="false" aria-controls="sidebar">
Toggle Sidebar
</button>
<div class="collapse" id="sidebar" style="position: absolute; width: 200px; height: 100%; background: #343a40; color: white;">
<ul class="list-unstyled p-3">
<li><a href="#" class="text-white">Home</a></li>
<li><a href="#" class="text-white">About</a></li>
<li><a href="#" class="text-white">Contact</a></li>
</ul>
</div>7. Best Practices for Using Collapse
- Keep It Accessible: Use
aria-expandedandaria-controlsattributes to make collapsible elements accessible. - Provide Context: Clearly indicate what content is hidden and make toggle buttons descriptive.
- Avoid Overuse: Don’t hide essential information; use collapse for supplementary or optional content.
- Optimize Performance: Ensure smooth transitions with optimized CSS and minimal DOM manipulation.
Conclusion
The Bootstrap 4 JavaScript Collapse component is a powerful tool for creating dynamic, user-friendly interfaces. From simple toggles to advanced accordions, it’s versatile and easy to implement.