What: Make a functional accordion with HTML. CSS is optional for styling and no JavaScript is needed. I love simple, I love lightweight, less is more. And in browsers in which it doesn’t work, all the content is still visible, which also improves accessibility.
<details>
<summary>headline / summary of the content</summary>
The actual content goes here.
</details>Headline
Content
Where: @ CSS-Tricks by Chris Coyier, also see this Codepen, it’s a fork by Thomas Higginbotham from the comments to the article that shows how you can change the marker when a segment is opened.
Of note:
- Also from the comments: There is no way to override the behavior. You can’t always have it open for example. It works how it works and that’s how it works.
- Good to know that it doesn’t work in Internet Explorer or Opera Mini.
- In the WordPress browser it acts a bit odd, removing all of the white space between the accordion and the paragraph below, so I put an <hr > between the paragraph and the little accordion. I’m using the classic editor instead of Gutenberg on this blog.