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.
