DEV Community

Cover image for Did you know you can create an accordion without JS or CSS?
Lauren Clark
Lauren Clark

Posted on

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

Using HTML5 you can now create an accordion type feature using <details> and <summary> tags. Neat!

I've not seen this mentioned anywhere before, yet came across it in a code test. 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 wit some extra attention as I couldn't find out anything about it with a cursory Googlin'

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.

Top comments (0)