Collapse
Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
Click the buttons below to show and hide another element via class changes:
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body bg-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>.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.
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
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.
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
Multiple targets
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.
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.