Jquery content accordion

Make a cool “accordion” with HTML5, CSS3 and jQuery

From this tutorial you will learn how to make a content accordion, using HTML5, CSS3 and jQuery. I have used a small .png file for the up and down arrow. You can download it from here.

Step #1: The HTML

We shall first make a definition list. The definition terms (dt tags) will contain the headers. The definition data (dd tags) will contain the paragraphs.

We also need to add a span with class “arrow” inside every definition term. We will do that a little later, dynamically, with jQuery.

Step #2: The CSS

At the top of our external stylesheet, we will add a reference to a local copy of the famous HTML5 Reset Stylesheet from html5doctor.com. Below this reference we shall add our own CSS:

NOTE: for the gradients I used the “Ultimate CSS Gradient Generator” from colorzilla.com.

Step #3: The jQuery

The comments in the jQuery code bellow are all the explaining you will need. Here is the code:

And we’ve made a nice accordion. You can see the demo HERE.

Leave a Reply

Your email address will not be published. Required fields are marked *