CSS Only Accordion Menu

A project on my radar is to add accordion functionality to some existing elements on the page. The tried and true method is to use javascript for this (e.g. jQuery's Accordion), and in fact I may very well end up using .js for my project. But, I got to thinking that maybe I could use the CSS3 :target pseudo-class, and skip javascript altogether.

HTML

The markup is really pretty semantic and straight forward. Your markup may differ of course, but I'm thinking of this as a list of 3 Groups of content that I want to accordion navigate between. I'll call each of my list items a class of "top-level", each of which must have a unique ID that will serve as our target anchor; because CSS doesn't much like numeric classes or IDs (it's supported, but you have to escape them), I'm going to be careful to define each of my IDs as "group-n", where n is the unique Group number. Within each of my list items, I need an anchor where the href is a hash followed by the ID of the anchor's top-level Group ID. Then, I'll create whatever content I want to show/hide with the accordion action, and just call each of these a class of "sub-level". So, my markup is going to look a little something like so (forgive the code formatting):

 

Group 1

Link 1
Link 2
Link 3

 

Group 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec dolor non lacus pharetra dapibus eu at tortor. Sed dictum blandit metus a rhoncus. Vestibulum consectetur fringilla velit eu aliquam. Etiam sodales libero velit. Morbi hendrerit, risus vel faucibus elementum, justo augue scelerisque magna, nec posuere velit nisl at nisl. Donec auctor venenatis nulla quis lacinia. Nullam id blandit nibh. 
 

Group 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec dolor non lacus pharetra dapibus eu at tortor. Sed dictum blandit metus a rhoncus. Vestibulum consectetur fringilla velit eu aliquam. Etiam sodales libero velit. Morbi hendrerit, risus vel faucibus elementum, justo augue scelerisque magna, nec posuere velit nisl at nisl. Donec auctor venenatis nulla quis lacinia. Nullam id blandit nibh. 
​

You'll notice that I chose another list, and a couple of paragraphs as my sub-level content; this is because we can put just about anything we want here.

CSS

So now let's look at how to make this work. It turns out to be super easy:

.accordion .sub-level {
    height: 0;
    overflow: hidden;
}

.accordion li:target .sub-level {
    height: auto;
}

That's it. With just the above CSS, and our nice semantic HTML, we can have an accordion menu in almost all browsers (sans IE8 and older - see below). So what's going on here? Well, really all we're doing is telling CSS to make our sub-level a height of 0px, and hide it (overflow: hidden) until later when we hit our li:target, we will change our sub-level to height: auto, to expand to show our content. DONE!

Making it pretty

From here you can start using your imagination, including adding some sweet, sweet, animated CSS easing of the height of as you navigate through your accordion's content. NOTE: For your height animations to work, you need an actual height value for your sub-levels; I'm not sure how to get around this just yet.

In my demo's case, I've just added some quick styles to help make it a bit more obvious what's happening, as well as showing the addition of arrows through CSS content, which is I think a pretty nice usability addition to an accordion menu. The rest is up to you!

DEMO

Full Demo w/Code

Support

The reason I think I may end up using javascript after all is because this is a CSS3 feature, and so isn't supported in many of the browsers that are used in referencing my site. Primarily, it's and IE issue (surprise!), as IE8 and older will not support this feature. Still, I'll try and make the case that the  overhead just to support IE8 and older isn't worth it, and those users can continue seeing the old, non-accordion version...