A while ago, I wrote about the CSS3
:target pseudo-class and how can that help you achieve cool results. Today you’ll learn how to create a pretty simple animated CSS3 accordion with its help.
What is an accordion
If you’re designing with usability in mind, then an accordion can be very useful when willing to organize content. The main advantage is packing a lot of content in a reduced space.
The HTML5 part
For this experiment I’ll use one of the new HTML5 elements, it’s about the
section element. When using new HTML5 elements like this one, for older browsers, you need to use the following trick:
To simplify things here, I just used the de facto script for enabling HTML5 elements in Internet Explorer. It’s about Remy Sharp’s html5shiv:
Enough with theory, let’s see how this actually works:
accordiondiv wraps the sections that compose the proper accordion.
sectionpanel contains a title and of course its content.
The demo works in browsers that support the
:target pseudo-class. Check compatibility table for more details.
So, if you want to use this for your projects, you must be aware that the above isn’t a cross-browser solution.
Later update: Jquery solution
If the above isn’t a recommended solution to use for production purposes because of support lacking for older browsers, the below solution is a cross-browser one.
Please check the Jquery demo, I hope it will help you!