Bootstrap5 Collapse

Bootstrap5 Collapse allows for easy toggling of content visibility.

Example

<button data-bs-toggle="collapse" data-bs-target="#demo">Collapse</button>

<div id="demo" class="collapse">
Here is some test content...
</div>

Example Explanation

The .collapse class is used to designate a collapsible element (the <div> in the example); clicking the button will toggle its visibility between hidden and shown.

To control the hiding and showing of content, add the data-bs-toggle="collapse" attribute to an <a> or <button> element. The data-target="#id" attribute corresponds to the collapsible content (<div id="demo">).

Note: On an <a> element, you can use the href attribute instead of data-bs-target:

Example

<a href="#demo" data-bs-toggle="collapse">Collapse</a>

<div id="demo" class="collapse">
Here is some test content...
</div>

By default, the collapsible content is hidden. You can add the .show class to make the content visible by default:

Example

<div id="demo" class="collapse show">
Here is some test content...
</div>

The following example extends the card component to display a simple accordion.

Note: Use the data-bs-parent attribute to ensure that all collapsible elements are within a specified parent element, allowing only one collapsible option to be shown at a time while others are hidden.

Example

<div id="accordion">
    <div class="card">
        <div class="card-header">
            <a class="btn" data-bs-toggle="collapse" href="#collapseOne">
            Option One
            </a>
        </div>
        <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
            <div class="card-body">
            #1 Content: tutorialpro.org -- Learning is not just about technology, it's about dreams!!!
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
            Option Two
            </a>
        </div>
        <div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
            <div class="card-body">
            #2 Content: tutorialpro.org -- Learning is not just about technology, it's about dreams!!!
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
            Option Three
            </a>
        </div>
        <div id="collapseThree" class="collapse" data-bs-parent="#accordion">
            <div class="card-body">
            #3 Content: tutorialpro.org -- Learning is not just about technology, it's about dreams!!!
            </div>
        </div>
    </div>
</div>