Bootstrap 4 – Responsive Web Design

Coding an Accordion with the Collapse component

In the previous section, I taught you a pretty simple way to use the Collapse component. The same component can be used to create a more complex version, which is the Accordion. Let's take a look at the basic code to create an Accordion:

<div id="accordion"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headerOne"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#sectionOne" aria-expanded="true" aria-controls="sectionOne"> Section #1 </a> </h4> </div> <div id="sectionOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headerOne"> This is the first section. </div> </div> <div class="panel panel-default"> <div class="panel-heading" ...