I had a little time to kill tonight so I decided to play around with HTML accordions, this is my experimentation using CSS3 to achieve what would normally be done with JavaScript.

The Result

After a couple hours of work I had three working examples using only HTML and CSS. Not perfect and far from being in a state to use commercially, but a proof of concept more or less.

1. Vertical Accordion with 1 Visible Slide (using radio buttons for control)
2. Vertical Accordion with Multiple Visible Slide (using checkboxes for control)
3. Horizontal Accordion (using radio buttons for control)

These examples require the latest CSS3 selectors and transitions so it will only work correctly in a recent webkit or gecko browser. Eg: Chrome, Safari, Firefox.

Example 1: Vertical Accordion – 1 Visible Slide

Example 2: Vertical Accordion – Multiple Visible Slides

Example 3: Horizontal Accordion