Holla Tech - Learn
Bootstrap 3: Collapsible
 

A collapsible can be used when it is needed to show/hide large amounts of content.

To show/hide content on a click of a button:
1. Add a data-toggle attribute with value “collapse” to the <button> element.
2. Add a data-target attribute with value “#id” where id is the id of the <div> element with collapsible content.
3. Use the collapse class for the <div> element with collapsible content.

For Example: 

<div class=“container”>
  <button data-toggle=“collapse” data-target=“#myCollapsible” class=“btn btn-warning”>Show/Hide</button>
  <div id=“myCollapsible” class=“collapse”>
  Bootstrap Collapsible
  </div>
</div>

 

Collapsible panels, list groups, and so on, can be created in a similar way.

TASK:
Paste the line of codes in a text editor and play around with the outputs. 

BACK NEXT

CLICK ON THE BUTTON BELOW TO RETURN TO THE BOOTSTRAP 3 MAIN COURSE PAGE. 

BOOTSTRAP 3 MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT