Bootstrap Collapse

The bootstrap collapse feature is used to show and hide the content.

Steps to create a Bootstrap 5 Collapsible Component:

Use either <a> or <button> to link collapsible element via href attribute of <a> and button data attribute data-bs-target.
Add data attribute data-bs-toggle="collapse" to either <a> or <button> and other data attribute data-bs-target="#id-of-collpasible-element" to only <button> while as href="#" attribute is used by <a> to link collapsible element by ID.
Assign collapsible container ID to <button> data attribute data-bs-target="#IdOfCollapsibleContainer" and href="#IdOfCollapsibleContainer" attribute of <a> element.Please keep in mind that assigning collapsible container ID inside the data attribute of data-bs-target and href must be preceded by a hash character (#).

General Syntax

      <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseId" >Collapse Features</a>
<div class="collapse" id="collapseId"></div>

Try it now

Source Code

          <div class="container mt-4">
  <h2>Bootstrap 5 Collpase</h2>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" >
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample">
    Button with data-bs-target
  </button>
  <div class="collapse" id="collapseExample">
    <div class="card card-body">
      This panel is hidden by default but revealed when the user clicks the button. Let us see it with an example.
    </div>
  </div>
</div>
<!--/container-->

Try it now

Source Code : Output

Bootstrap 5 Collpase

Link with href

This panel is hidden by default but revealed when the user clicks the button. Let us see it with an example.

Code Explanation

Please keep in mind that by default, the collapsible element is hidden. To show the hidden content, you have to use .show class to the collapsible elements (<div> containing class .collapse).

Links With Collapse

General Syntax

      <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample2" >Link with href</a>
<div class="collapse show" id="collapseExample2"></div>

Try it now

Source Code

          <div class="container mt-4">
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <div class="collapse show" id="collapseExample2">
    <div class="card card-body">
      This is the body content of the collapsible. It is by default hidden and it will be shown when the user clicks the link.
    </div>
  </div>
</div>
<!--/container-->

Try it now

Source Code : Output

Link with href

This is the body content of the collapsible. It is by default hidden and it will be shown when the user clicks the link.

Code Explanation

In this example, the link is used to show and hide the collapsible content.

Multiple targets

General Syntax

      <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2">Toggle second element</button>
<div class="collapse multi-collapse" id="multiCollapseExample1"></div>
<div class="collapse multi-collapse" id="multiCollapseExample2"></div>

Try it now

Source Code

          <div class="container mt-4">
  <div class="row">
    <div class="col-12 col-sm-4">
      <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
    </div>
    <!--/first column-->
    <div class="col-12 col-sm-4">
      <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
    </div>
    <!--/second column-->
    <div class="col-12 col-sm-4">
      <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
    </div>
    <!--/This column-->
  </div>
  <!--/row-->
  <div class="row">
    <div class="col">
      <div class="collapse multi-collapse" id="multiCollapseExample1">
        <div class="card card-body">
          Write down card content.
        </div>
      </div>
    </div>
    <div class="col">
      <div class="collapse multi-collapse" id="multiCollapseExample2">
        <div class="card card-body">
         Describe card content.
        </div>
      </div>
    </div>
  </div>
</div>
<!--/container-->

Try it now

Source Code : Output

Toggle first element

Write down card content.

Describe card content.

Code Explanation

In this example, multiple target element is used to show and hide the collapsible content.

Online Test / Quiz

Question set 1

Web Tutorials

Bootstrap 5 Collapse, collapse, bs5 collapse, bootstrap collapse, collapse menu

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4