/    /  Bootstrap Collapse

Bootstrap Collapse

 

Bootstrap 4 offers different classes for creating collapsible elements, the collapsible element is useful when you want to hide or show a large amount of content.

  • .collapse: It hides the content.
  • .collapsing: It applied during transitions.
  • .collapse.show: It shows the content.

 

Example:

 

<div class="container"> 
 <h2>Basic Collapse Example</h2> 
 <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button> 
 <div id="demo" class="collapse"> 
Bootstrap 4  offers different classes for creating collapsible elements, the collapsible element is useful when you want to hide or show a large amount of content.
 </div> 
</div>

 

OUTPUT:

 

Bootstrap4 Collapse

 

Add the .show class its show the content by default:

 

Example:

 

<div class="container">
 <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">collapsible</button>
 <div id="demo" class="collapse show">
  Multiple buttons or anchor tags can show/hide an element if they can reference it with their href or data-target attribute.
 </div>
</div>

 

OUTPUT:

 

Bootstrap4 Collapse

 

Example Explained:

 

data-toggle =” collapse” is added to the link on which you can click to expand or collapse the component.

href or a data-target attribute is connected to the parent component, whose value is the id of the child component.

the data-parent attribute is added for creating the accordion-like effect.

 

Multi Toggle Collapsible: 

 

Multiple buttons or anchor tags can show or hide an element if they can reference it with their href or data-target attribute.

 

Example:

 

<div>
 <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
 </a>
 <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample"
  aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
 </button>
</div>
<div class="collapse" id="collapseExample">
 <div class="mt-3">
  Multiple buttons or anchor tags can show/hide an element if they can reference it with their href or data-target attribute.
 </div>
</div>

 

OUTPUT:

 

Bootstrap4 Collapse