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:
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:
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: