Make an Accordion with HTML

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.

Photo by Pixabay via Pexels

Leave a Comment