Pure HTML/CSS3 Accordion (No Javascript)
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.
- Vertical Accordion with 1 Visible Slide (using radio buttons for control)
- Vertical Accordion with Multiple Visible Slide (using checkboxes for control)
- 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.