Bootstrap Collapse

Bootstrap collapse feature is used to show and hide the content. 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).

Steps To Create bootstrap Collapsible

  • Step1: Use either <a> or <button> to link collapsible element via href attribute of <a> and button data attribute data-bs-target.

  • Step2: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.

  • Step3: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 data attribute of data-bs-target and href is must be preceded by hash character(#).

General Syntax

      <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" >
  Link with href
</a>
<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>
    
Try It Now

Source Code

    <div class="container mt-4">
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample">
    Link with href
  </a>

  <div class="collapse" id="collapseExample">
    <div class="card card-body p-4">
      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 yourself

Source Code : Output

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

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

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 class="card card-body">
    Write your collapse content here.
  </div>
</div>
    
Try It Now

Source Code

    <div class="container mt-4">
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample2">
    Link with href
  </a>
  <div class="collapse show mt-4" id="collapseExample2">
    <div class="card card-body p-4">
      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 yourself

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.

Note: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 class="card card-body">
    Write your content here
  </div>
</div>
<div class="collapse multi-collapse" id="multiCollapseExample2">
  <div class="card card-body">
    Write Your content here.
  </div>
</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">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 p-4">
          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 p-4">
          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 yourself

Source Code : Output

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

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

Online Test / Quiz
Web Tutorials
Bootstrap Collapse
Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS