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:

Accordion1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget mauris in tortor semper bibendum eget nec nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis semper placerat nisi ut scelerisque. Nulla vestibulum ornare massa, sit amet tristique enim tristique non. Sed pharetra diam magna, sed hendrerit erat consequat id. Cras lacinia nunc scelerisque odio hendrerit sagittis. Vestibulum porttitor congue nunc, et consectetur dui rhoncus et. Nunc et cursus est, quis molestie eros. Cras viverra purus ut elit fringilla volutpat. Donec sit amet massa erat. Sed tincidunt velit dolor, vel sollicitudin lectus cursus ac.
Accordion2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget mauris in tortor semper bibendum eget nec nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis semper placerat nisi ut scelerisque. Nulla vestibulum ornare massa, sit amet tristique enim tristique non. Sed pharetra diam magna, sed hendrerit erat consequat id. Cras lacinia nunc scelerisque odio hendrerit sagittis. Vestibulum porttitor congue nunc, et consectetur dui rhoncus et. Nunc et cursus est, quis molestie eros. Cras viverra purus ut elit fringilla volutpat. Donec sit amet massa erat. Sed tincidunt velit dolor, vel sollicitudin lectus cursus ac.
Accordion3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget mauris in tortor semper bibendum eget nec nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis semper placerat nisi ut scelerisque. Nulla vestibulum ornare massa, sit amet tristique enim tristique non. Sed pharetra diam magna, sed hendrerit erat consequat id. Cras lacinia nunc scelerisque odio hendrerit sagittis. Vestibulum porttitor congue nunc, et consectetur dui rhoncus et. Nunc et cursus est, quis molestie eros. Cras viverra purus ut elit fringilla volutpat. Donec sit amet massa erat. Sed tincidunt velit dolor, vel sollicitudin lectus cursus ac.

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.  

Download Files

Total Downloads: 2261
Top