Collapse

Toggle the visibility of content with a few classes and JavaScript plugins.

Basic Collapse

This is some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger. 
<button class="btn btn-primary" type="button"
        data-bs-toggle="collapse"
        data-bs-target="#collapseExample">
    Toggle Collapse
</button>

<div class="collapse" id="collapseExample">
    <div class="card card-body">
        Content here...
    </div>
</div>

Link Button

<a class="btn btn-success"
   data-bs-toggle="collapse"
   href="#collapseExampleLink">
    Link with href
</a>

<div class="collapse" id="collapseExampleLink">
    <div class="card card-body">
        Content here...
    </div>
</div>

Multiple Targets

A button can show and hide multiple elements by referencing them with a selector in its data-bs-target attribute.

This is the first collapse element. You can toggle it individually or with the "Toggle Both" button.
This is the second collapse element. You can toggle it individually or with the "Toggle Both" button. 
<button class="btn btn-primary" type="button"
        data-bs-toggle="collapse"
        data-bs-target=".multi-collapse">
    Toggle Both Elements
</button>

<button class="btn btn-secondary" type="button"
        data-bs-toggle="collapse"
        data-bs-target="#multiCollapseExample1">
    Toggle First Element
</button>

<div class="collapse multi-collapse" id="multiCollapseExample1">
    <div class="card card-body">First content</div>
</div>

<div class="collapse multi-collapse" id="multiCollapseExample2">
    <div class="card card-body">Second content</div>
</div>

Horizontal Collapse

The collapse plugin supports horizontal collapsing. Add the .collapse-horizontal modifier class to transition the width instead of height.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered. 
<button class="btn btn-primary" type="button"
        data-bs-toggle="collapse"
        data-bs-target="#collapseWidthExample">
    Toggle Width Collapse
</button>

<div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
        This is a horizontal collapse element.
    </div>
</div>