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.