Bootstrap 5 Collapse
Show and hide content with smooth animations
📦 What is Bootstrap Collapse?
Bootstrap collapse component toggles the visibility of content with smooth animations. Perfect for accordions, expandable sections, and hiding lengthy content until needed, making your pages cleaner and more organized.
<!-- Basic Collapse -->
<button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo">
Toggle Content
</button>
<div class="collapse" id="demo">
Hidden content appears here!
</div>
Basic Collapse
Basic Collapse components hide and show content using data-bs-toggle="collapse" and a target element with the .collapse class. The target is referenced via data-bs-target or href. Collapse provides smooth toggle animations, improves space management, and reduces clutter—commonly used in FAQs, read-more sections, or mobile menus. It supports both button and anchor triggers, works without JavaScript (using :target), and integrates seamlessly with Bootstrap’s event system for dynamic interfaces.
<button class="btn btn-info" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample">
Click to Toggle
</button>
<div class="collapse" id="collapseExample">
<div class="card card-body mt-2">
This content can be shown or hidden with a smooth animation.
</div>
</div>Output:
🔹 Accordion
Accordions group multiple collapse items so only one section remains open at a time, using the .accordion container and data-bs-parent. This pattern organizes related content compactly—ideal for FAQs, documentation, settings panels, or multi-step forms. Accordions improve scannability, reduce scrolling, and provide a predictable user experience. Each accordion item includes a header button and a collapsible body, with smooth transitions and automatic sibling collapse when a new item is opened.
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
Section 1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">
Content for section 1
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
Section 2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
Content for section 2
</div>
</div>
</div>
</div>Output:
🔹 Multiple Targets
Multiple Targets allow one button to control several collapse elements simultaneously by listing multiple IDs in data-bs-target. This is useful for showing/hide related content sections together, such as expanding all answer panels in a FAQ, toggling visibility of grouped filters, or synchronizing collapsed states in complex interfaces. It reduces user interaction steps, maintains state consistency, and simplifies UI logic in dashboard widgets, admin panels, or interactive reports.
<button class="btn btn-success" data-bs-toggle="collapse" data-bs-target=".multi-collapse">
Toggle Both
</button>
<div class="row mt-2">
<div class="col">
<div class="collapse multi-collapse" id="multiOne">
<div class="card card-body">First element</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiTwo">
<div class="card card-body">Second element</div>
</div>
</div>
</div>🔹 Horizontal Collapse
Horizontal Collapse (.collapse-horizontal) slides content in from the side instead of vertically, ideal for sidebars, off-canvas menus, or slide-out panels. A width must be set on the collapsing element for proper animation. This variant saves vertical space and provides a distinctive interaction pattern—commonly used in navigation drawers, detail panels, or supplementary content areas in desktop-focused applications and responsive web apps.
<button class="btn btn-warning" data-bs-toggle="collapse" data-bs-target="#collapseWidth">
Toggle Width
</button>
<div style="min-height: 120px;">
<div class="collapse collapse-horizontal" id="collapseWidth">
<div class="card card-body" style="width: 300px;">
This collapses horizontally!
</div>
</div>
</div>🔹 Show by Default
Show by Default collapse elements are initially expanded by adding the .show class alongside .collapse. This allows content to be visible on page load while retaining toggle functionality. Users can still collapse the content as needed. This approach is useful for default-expanded FAQ answers, pre-opened instruction panels, or important disclosures that require immediate visibility but benefit from optional hiding to reduce clutter.
<button class="btn btn-danger" data-bs-toggle="collapse" data-bs-target="#collapseShow">
Toggle
</button>
<div class="collapse show" id="collapseShow">
<div class="card card-body mt-2">
This content is visible by default but can be collapsed.
</div>
</div>