Collapse
Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
Example
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<ul class="d-flex flex-wrap gap g-3 pb-3"> <li> <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> Link with href </a> </li> <li> <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Button with data-bs-target </button> </li></ul>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.
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
<div class="pb-3"> <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><div style="min-height: 150px;"> <div class="collapse collapse-horizontal" id="collapseWidthExample"> <div class="card card-body" 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
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.
<ul class="d-flex flex-wrap gap g-3 pb-3"> <li><a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false">Toggle first element</a></li> <li><button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false">Toggle second element</button></li> <li><button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false">Toggle both elements</button></li></ul><div class="row"> <div class="col"> <div class="collapse multi-collapse show" 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>
