Collapse is one of the components of Bootstrap that can be used for toggling the visibility of content present in any class. The collapse component can also be featured using JavaScript plugins. 

 

These Javascript plugins enable the collapse component to either hide or show the contents. A specific button or anchor can be tagged to map toggling using a trigger functionality. To enable collapse for any element, an estimated animate the height from 0 to CSS. You can either use Javascript plugins or classes to wrap independent elements. 

 

For instance,

 

Several changes can be added to classes via button click for Collapse content. For hiding the contents, you can include class .collapse hides content to hide the contents. If you need to apply any transitions, then additionally include .collapsing functionality. Also, the .collapse.show attribute is used for expanding the contents. 

 

For instance,

<p>

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">

    A clickable button using data-bs-target

  </button>

  </p>

<div class="collapse" id="collapseExample">

  <div class="card card-body">

    An example for collapse which is added into the button. 

  </div>

</div>

 

Explanation:

There are two options available to add collapse one is using data-bs-target under a button and the another is to include in the anchor tag. But it is recommended to use the data-bs-target attribute on the button. Even you can add multiple targets within the class like button tags or anchor tags to hide and show the contents.

Subscribe For Daily Updates