1) Bootstrap Collapse

Collapse means you can hide and show your content.

To use the .collapse class button content that will be shown or hidden with a click of a button. and add the data-toggle="collapse" attribute to an <a> or a <button> element. then add the data-target="#id" attribute to connect the button with the collapsible content (<div id="demo">

Example:-

 <button data-toggle="collapse" data-target="#demo">Collapsible</button>
 <div id="demo" class="collapse">
 write text here....
 </div>

Test it Now

2) Bootstrap Accordion

Example:-

 <div id="accordion">

  <div class="card">
    <div class="card-header">
      <a class="card-link" data-toggle="collapse" href="#collapseOne">
        Click Here #1
      </a>
    </div>
    <div id="collapseOne" class="collapse show" data-parent="#accordion">
      <div class="card-body">
        Write Content Here...
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
        Click Here #2
      </a>
    </div>
    <div id="collapseTwo" class="collapse" data-parent="#accordion">
      <div class="card-body">
        Write Content Here...
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
        Click Here #3
      </a>
    </div>
    <div id="collapseThree" class="collapse" data-parent="#accordion">
      <div class="card-body">
        Write Content Here...
      </div>
    </div>
  </div>

 </div>

Test it Now

Next Topic

← prev next →

Bootstrap 4 Tuto

1) Bootstrap Collapse

2) Bootstrap Accordion