Step by step how to create an Accordion with the Twitter Bootstrap

        By Carmel Schvartzman

In this tutorial we'll learn how to create an Accordion with the Twitter Bootstrap. The open source Twitter Bootstrap offers you many widgets to include in your web page with a minimal effortand well design, which can be arranged on a grid system that scales up to 12 columns, and adapts to the mobile device when size decreases.
The Bootstrap is the most widely used CSS3 open source framework for creating responsive web apps,  turning front-end web design very fast.

We suppose that you have installed the Twitter Bootstrap in your MVC app. Else, learn  in this tutorial how to do it in just 2 minutes

In just 5 minutes we'll build a responsive web page using an Accordion  with the Twitter Bootstrap :

The Twitter Bootstrap can be reached & downloaded from the Bootstrap official site : Bootstrap :

Create an HTML web page or an MVC View, but make sure to load the CSS and the .js jQuery scripts in the page:

Now we'll keep COPYING-PASTING HTML markup from the Bootstrap official web site, to reuse it on our web page.

TWITTER BOOTSTRAP ACCORDION 

Go to the Bootstrap and copy the Accordion markup :

Then paste it inside your MVC View or your HTML file, putting the button inside the Header of the Panel:

Save & refresh the web page :

Press the button to see the Accordion panels move upwards or downwards:

Also you'll have all the responsive behavior of the Twitter Bootstrap:

That's all!!  

Happy programming.....

כתב: כרמל שוורצמן