Responsive CSS3 Drop-Down to Accordion

This version is Old, much improved version here

Created By Ian Hansson @teapoted

Resize the browser to below 500 and the drop-down turns into an accordion. This is done all with CSS, using tabindex on the drop-downs to allow you to :focus them.

Browser Support:

Best In Test: Firefox (transition performance)
Full Support: Chrome, Firefox, Opera, Safari (latest versions of all browsers)
Partial Support: IE9 (Functional, but does not support transitions)
NOTE: This has not been made to gracefully degrade, although it's perfectly possible.

Mobile support for :focus is highly limited, why? I don't know. But the only way to get people to add something is to show what I can do and then whine about it not working.