Bootstrap Collapse

The Collapse component allows you to toggle the visibility of massive blocks of content on your page with beautifully smooth sliding CSS animations.

It is the core technology used to build FAQs (accordions), hidden menu systems, and "Read More" expandable paragraphs.

JavaScript Required: Collapse physically alters the DOM. You MUST ensure bootstrap.bundle.min.js is active at the bottom of the document to witness the toggling animation!

1. Basic Collapse Array

Wiring up a Collapse block requires two distinct components connecting to each other:

The Button: Must carry data-bs-toggle="collapse" to announce its purpose. It also requires the data-bs-target="#myUniqueId" attribute pointing exactly to the specific block it controls.
The Content Block (Target): Must carry the base .collapse class to keep it hidden upon load. Critically, it must actually have the id="myUniqueId" so the button knows communicating with it!

Some perfectly formatted placeholder content for the collapse component. This panel is completely hidden from the user on page load, and slides down flawlessly across the Z-axis instantly upon being triggered!

<!-- The Trigger: Note the #collapseTarget mapping in data-bs-target -->
<button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#collapseTarget">
    Reveal Data
</button>

<!-- The hidden block: Kept invisible by the .collapse class -->
<div class="collapse" id="collapseTarget">
    <div class="card card-body">
        Secret information revealed!
    </div>
</div>

2. Horizontal Collapsing

By default, the DOM slides down vertically. However, starting in Bootstrap 5.1, you can explicitly force the block to slide open Left/Right like a sliding drawer!

You apply .collapse-horizontal to the target wrapper, and then establish a hardcoded width on the inner content card so Bootstrap knows exactly how far out to physically "push" the slide.

This is some placeholder content for a horizontal collapse. We locked the internal width to exactly 300 pixels!

<!-- Added the -horizontal utility! -->
<div class="collapse collapse-horizontal" id="horizontalTarget">
    <!-- A strict layout width is absolutely mandatory here -->
    <div class="card card-body" style="width: 300px;">
        Sliding sideways!
    </div>
</div>

3. Multiple Targets Interlinked

You are not restricted to linking buttons directly to a single `ID`. Because `data-bs-target` natively accepts standard CSS Selectors, you can trigger massive arrays of panels at exactly the same time by pointing the button at a Class instead!

This is the FIRST panel mapped to #multiCollapseFirst.

This is the SECOND panel mapped to #multiCollapseSecond.

<!-- Notice the '.' targeting the multi-collapse class! -->
<button class="btn btn-success" data-bs-toggle="collapse" data-bs-target=".multi-collapse">
    Open everything
</button>

<!-- Both panels receive the target class! -->
<div class="collapse multi-collapse" id="panelOne">...</div>
<div class="collapse multi-collapse" id="panelTwo">...</div>

« Previous Lesson Next Lesson »