A while ago, I wrote about the CSS3
:target pseudo-class and how can that help you achieve some cool results when that matches an element that’s the target of a identifier in the document’s URI.
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 out the compatibility table for more details.
CSS accordion with
A modern approach is to build an accordion using the HTML
summary elements but apparently there’s some discussion on this lately:
- The details and summary elements
- Details / Summary Are Not [insert control here]
detailsis Not an Accordion
- Details/Summary is the Easiest Way Ever to Make an Accordion
HTML5 & CSS3 envelope contact form
Sexy CSS3 menu