Did you know you can create an accordion without JS or CSS?

I've not seen this mentioned anywhere before, yet came across it in a code test a few months back. I was totally stumped by it, and had to actually go scour the spec to find out the answer (after failing the question :<)

Check out this Codepen to see it in action. If this is common knowledge, I certainly wasn't aware. Thought it could do with some extra attention as I couldn't find out anything about it with a cursory Googlin'

See the Pen HTML5 Details & Summary Accordion - Hide/Show with no CSS or JS! by Lauren Clark (@laurenclark) on CodePen.

It's not hugely supported but can be used with evergreen browsers and in the future (the bootstrapless, grid framework free, dreamy future) this will probably be how we all deal with FAQs and hide/reveal content in a much more semantic way.

You can use this right now for accessibility, and go about doing some show/hide JS to cater to IE and Edge.

Here's an example of what you can do with details and summary. The open/reveal and close/collapse are all handled via the browser, no JS necessary. Even the + and - animation and toggle are JS free!

See the Pen Accordion with Details/Summary Example (Fancy) by Lauren Clark (@laurenclark) on CodePen.

In the above example I've included a polyfill for the details and summary HTML5 implementation kapitancho/logifill-details