Creating Accordion with CSS3 and JQuery

Using some of the exciting properties of CSS3, we can create a beautiful accordion for the web content. This would give us vertical tabs that slide out when hovering. The HTML part of this task would consist of list where each accordion tab would be a list element. Markup with only a single list element is as follows:

Although there would be other list elements having their respective classes, we would not really need those classes but would instead style the element using #accordion in our style sheet.

Now the style for the list would be as follows:

Each list element would have a different background image which can be customized and changed according to the requirements. Next step would be to create a semi-transparent header for each list item. This would be done as follows:

The minor details can be set later on. Now we need to create a function which would make the list elements slide our when hovered upon them. This would be done with the help of JavaScript. Then the top heading should fade out while the gradient (CSS class “bgDescription”) and the description appear:

The first function inside of $(‘#accordion > li’).hover is the function triggered when the mouse moves over the respective element and the second function gets triggered when moving the mouse out again. The accordion is ready and would run perfectly well on all the browsers that support this CSS3 feature.