A vintage accordeon

Building an HTML accordion without JavaScript

JavaScript isn’t always essential. Sometimes, just using HTML and a little CSS is enough. Let’s take a look at a concrete use case.

Do you know the details and summary HTML element?

You should.

To create an accordion with no JavaScript, they are your friends.

But you may want to customize the look.

Using the ::after pseudo-class on the summary element, you can add some content with the content property.

What about changing the content based on the state of the details element (e.g. opened or closed)?

Apply a different style when the accordion is open using the details[open] selector.

Here is the live demo I use on my blog on JSFiddle.

Enjoy!

Credit : Photo by Gaelle Marcel on Unsplash.

License GPLv3 | Terms
Built with Hugo
Theme Stack designed by Jimmy