HTML5 spoiler reveal on click

Common web page / blog post applications where concealing text until the viewer clicks include:

  • table of contents
  • spoilers
  • long details not all readers are interested in at that point in the article

This is implemented via the HTML5 details tag. While it is also possible to implement click-to-reveal text via CSS and/or JavaScript, we prefer the simplicity of a single HTML5 tag.

<details>
  <summary>click for spoilers</summary>

  <ul>
    <li>The season finale for Season 1 showed ...</li>
    <li>And season 2 opener revealed ...</li>
  </ul>
</details>

Example

click for spoilers
  • The season finale for Season 1 showed ...
  • And season 2 opener revealed ...