January 2, 2014 1:07 pm

How to create Accordion toggle using jQuery and Bootstrap

Bootstrap is one of the best framework for designing your websites and we have already created an article on contact form with bootstrap so this time we come with accordion toggle with bootstrap. Its very simple to configure and create with very nice animation with CSS and jQuery.


Used Bootstrap minified library and jQuery library With CSS and HTML below is the HTML of accordion and multiple options can be found on demo page.

In above code class=”accordion-group” create a accordion main div class=”accordion-heading” class used to show heading of accordion class=”accordion-toggle” class used to show and hide on click event class=”accordion-inner” contain inner text of accordion.

Libraries to include:

CSS required to highlight accordion header color:

You can download this tutorial from our website and also check its demo.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.

Tutorial Categories: