Originally when I first made this I just wanted to make an animated accordion with mostly CSS and some simple javascript. I've since added Aria roles and fixed up that Javascript to work better.

Pattern for accessible responsive tabs to accordion. Tested in FF NVDA, Chrome/Safari in VO & iOS. If any issues across readers, please let me know in comments!

css3/sass/jquery accordion that has some simple animations with arrows all done in css (sliding and click states done with jquery).

Read the copy in the accordion sections for some info about how this was made.

Flat design accordion with as many nested levels as you need. Click on it!

Inspired by Ch3mical.com.

I saw this accordion at Paul Kelley's website. He had used jQuery and images to achieve the effect. I decided to take a CSS3 approach and use elements instead of images. I have use Genericons font for the social networking icons.

The multi-toggle is basically just nested accordions. The user taps on the parent category to reveal children categories underneath. Once enough screen real estate becomes available, they convert to the usual multi-level dropdown we’re used to seeing.

I was looking for a responsive way to go from tabs to accordion. Couldn't find anything, so here's my attempt. When wide tabs, when narrow accordion.

Advantages of the properties of "checkbox" to create accordion effect using only HTML and CSS.

Responsive CSS table, that turns into an accordion menu on small screens. Change Radio inputs to Checkboxes to expand multiple sections.