Accordion Menu

CSS Checkboxes and (More) Accessible Drop-downs

Here's a pure CSS solution to the challenge of styling input check-boxes. The check-boxes also act as a trigger for displaying hidden content via the :checked psuedo-class. You might use this mechanism as a means for putting together drop-downs and accordion-menus, although the technique is most applicable to HTML forms. You'll find some 508/WCAG considerations here to make this UI as accessibility compliant as possible.

Accessibility Disclaimer

I'm not an accessibility auditor, so don't take it for granted that what you find here is fully 508/WCAG compliant. I leave these kinds of determinations to proper auditors. Nonetheless, standards compliance is an issue I take seriously, and I've made every attempt to keep this code as accessible as possible. Use at your own risk. If accessibility isn't a thing for you, be damned with the consequences and have at it!