Collapse
Default Example#
Click the buttons below to show and hide another element via class changes:
-
.collapsehides content -
.collapsingis applied during transitions -
.collapse.showshows content
Generally, we recommend using a button
with the
data-bs-target attribute.
While not recommended from a semantic
point of view, you can also use a link
with the href attribute
(and a role="button"). In
both cases, the
data-bs-toggle="collapse"
is required.
<div class="hstack gap-2">
<a class="btn btn-primary mb-2" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
</div>
<div class="collapse" id="collapseExample">
<div class="card mb-0">
<div class="card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the
user activates the relevant trigger.
</div>
</div>
</div>
Horizontal #
The collapse plugin also supports
horizontal collapsing. Add the
.collapse-horizontal
modifier class to transition the
width instead of
height and set a
width on the immediate
child element. Feel free to write your
own custom Sass, use inline styles, or
use our width utilities.
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
<div style="min-height: 135px;">
<div class="collapse collapse-horizontal" id="collapseWidthExample">
<div class="card card-body mb-0" style="width: 300px;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
</div>
Multiple Targets #
A <button> or
<a> can show and hide
multiple elements by referencing them
with a selector in its
href or
data-bs-target attribute.
Multiple <button> or
<a> can show and hide
an element if they each reference it
with their href or
data-bs-target attribute
<div class="hstack gap-2 mb-3">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</div>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Some placeholder content for the first collapse component of this multi-collapse example. This panel
is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for the second collapse component of this multi-collapse example. This
panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>