Bootstrap 5 Collapse

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

Steps to create 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 collasible 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 collpasible container id inside data attribute of data-bs-target and href is must be preceded by hash chracter(#).

General Syntax

Try it now

Source Code

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

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

Links With Collapse

General Syntax

Try it now

Source Code

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

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

Multiple targets

General Syntax

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">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id, maxime est. Laborum blanditiis aperiam fuga neque ut ad provident nam.
        </div>
      </div>
    </div>
    <div class="col">
      <div class="collapse multi-collapse" id="multiCollapseExample2">
        <div class="card card-body">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id, maxime est. Laborum blanditiis aperiam fuga neque ut ad provident nam.
        </div>
      </div>
    </div>
  </div>
</div>
<!--/container-->

Try it now

Source Code : Output

Toggle first element

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id, maxime est. Laborum blanditiis aperiam fuga neque ut ad provident nam.

Code Explanation

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

Online Test / Quiz

Question set 1

Bootstrap 5 Collapse

General Syntax

Source Code

Source Code : Output

Bootstrap 5 Collpase

Code Explanation

Links With Collapse

General Syntax

Source Code

Source Code : Output

Code Explanation

Multiple targets

General Syntax

Source Code

Source Code : Output

Code Explanation

Online Test / Quiz

Our Tutorials