Bootstrap 5 Collapsible

Basic Collapse

Collapsible components are very useful when you want to hide and show a large amount of content:

Examples

<button data-bs-toggle="collapse" data-bs-target="#demo">Spring</button>
<div id="demo" class="collapse">
  <p>On a fine day, seeking the fragrance of flowers by the Sihe River, the scenery is boundless and new.</p>
  <p>Easy to recognize the face of the东风, the myriad colors of spring are always blooming.</p>
</div>

Try It Yourself

Example Explanation

.collapse Class to indicate the collapsible element (in our example, <div>); by clicking the button, the content to be displayed or hidden can be shown or hidden.

To control (show/hide) the collapsible content, please set data-bs-toggle="collapse" Attribute to the <a> or <button> element. Then add data-bs-target="#id" Attribute to link the button and the collapsible content (<div id="demo">).

Note:For the <a> element, you can use href Attribute instead of data-bs-target Attributes:

Examples

<a href="#demo" data-bs-toggle="collapse">Spring</a>
<div id="demo" class="collapse">
  <p>On a fine day, seeking the fragrance of flowers by the Sihe River, the scenery is boundless and new.</p>
  <p>Easy to recognize the face of the东风, the myriad colors of spring are always blooming.</p>
</div>

Try It Yourself

By default, the collapsible content is hidden. However, you can add .show Class to display content by default:

Examples

<div id="demo" class="collapse show">
  <p>On a fine day, seeking the fragrance of flowers by the Sihe River, the scenery is boundless and new.</p>
  <p>Easy to recognize the face of the东风, the myriad colors of spring are always blooming.</p>
</div>

Try It Yourself

Accordion (Accordion)

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

Note:Use data-bs-parent Properties ensure that when one of the collapsible items is displayed, all collapsible elements under the specified parent will be closed.

Examples

<div id="accordion">
  <div class="card">
    <div class="card-header">
      <a class="btn" data-bs-toggle="collapse" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>Spring</h3>
        <p>On a fine day, seeking the fragrance of flowers by the Sihe River, the scenery is boundless and new.</p>
        <p>Easy to recognize the face of the东风, the myriad colors of spring are always blooming.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>Summer Song</h3>
        <p>The red and purple flowers have turned to dust, the sound of the cuckoo heralds the arrival of summer.</p>
        <p>The path between the roads is endless, mulberry and hemp, realizing that I am a peaceful person.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
        Collapsible Group Item #3
      </a>
    </div>
    <div id="collapseThree" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>Mountaineering</h3>
        <p>Steep stone path leading to the cold mountain, a house where white clouds gather.</p>
        <p>Stop and enjoy the late autumn scenery, the frosty leaves are redder than the flowers in February.</p>
      </div>
    </div>
  </div>
</div>

Try It Yourself