Accordion in Twitter Bootstrap

This article will guide you to create accordions using twiiter bootstrap. You need to include bootstrap.css and bootstrap.js file in your page where you want to display the Accordion. It also requires the transitions plugin which is included in bootstrap.js. Click here to learn detail about bootstrap and download the required files.

HTML Tab Code:

<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" 
href="#collapseOne"> Accordion Item #1 </a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner"> --- </div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" 
href="#collapseTwo"> Accordion Item #2 </a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">---</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" 
href="#collapseThree"> Accordion Item #3 </a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">---</div>
</div>
</div>
</div>

Output:

The DIV class accordion-group will create the Accordion groups. accordion-heading will create the title part of the Accordion and accordion-body collapse will create the body/ content part. If you want to open your Accordion on page load then you can make the content class as accordion-body collapse in.