In bootstrap, the collapse feature is useful to show or hide the content elements by clicking on buttons or hyperlinks. The buttons or hyperlinks will trigger the specific elements that are mapped to the toggle.
To implement the collapsible functionality, first, create a collapsible element (<div>) with .collapse class. After that, create a hyperlink (<a>) or button (<button>) element with data-toggle="collapse" attribute and add data-target="#id" attribute to button or add href= "#id" attribute to the hyperlink to show or hide (toggle) the collapsible element content.
Live Preview <a class="btn btn-primary" data-toggle="collapse" href="#collasediv">Collapsible Link</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collasediv">
Collapsible Button
</button>
<div class="collapse" id="collapsediv">
<div class="card card-body">
Tutlane is an eLearning organization providing quality online tutorials, articles, and information related to the latest information technology and non-technical subjects.
</div>
</div>
If you observe the above code, we added data-target="#collapsediv" attribute to button and href= "#collapsediv" attribute to hyperlink to toggle (show/hide) the div content on both hyperlink and button click.
The above example will return the result as shown below.
By default, the collapsible element content will be hidden. In case if you want to show content, then you need to add .show class to respective element like as shown below.
<div id="collapsediv" class="collapse show">
<div class="card card-body">
content
</div>
</div>
Bootstrap Multiple Collapsible Targets
In bootstrap, we can toggle (show/hide) the multiple elements with a single button click by adding the common class (for example: .multi-collapse) to the respective content elements and referring the same class in data-target attribute of the button like data-target = ".multi-collapse".
Live Preview <a class="btn btn-primary" data-toggle="collapse" href="#collasediv">Toggle First</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapsediv1">
Toggle Second
</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse">
Toggle Both Elements
</button>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="Div1">
<div class="card card-body">
Tutlane is an eLearning organization providing quality online tutorials, articles, and information related to the latest information technology and non-technical subjects.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="Div2">
<div class="card card-body">
Tutlane is an eLearning organization providing quality online tutorials, articles, and information related to the latest information technology and non-technical subjects.
</div>
</div>
</div>
</div>
The above example will return the result as shown below.
Bootstrap Collapsible Accordion Menu
By using the bootstrap card component, we can create the accordion by extending the default collapse behavior. To achieve proper accordion style, we need to wrap all the card items inside of <div> element with .accordion class.
Live Preview <div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne">
Collapse Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordionExample">
<div class="card-body">
Tutlane is an eLearning organization providing quality online tutorials, articles, and information related to the latest technologies.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo">
Collapse Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordionExample">
<div class="card-body">
Tutlane is an eLearning organization providing quality online tutorials, articles, and information related to the latest technologies.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree">
Collapse Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" data-parent="#accordionExample">
<div class="card-body">
Tutlane is an eLearning organization providing quality online tutorials, articles, and information related to the latest technologies.
</div>
</div>
</div>
</div>
If you observe the above code, we added data-parent attribute to the collapsible elements to make sure that only one item to be opened at a time and remaining all elements to be closed.
The above example will return the result as shown below.
This is how the collapse feature is useful to show or hide the content elements by clicking on buttons or hyperlinks based on our requirements.
