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. This technique works for many Markdown-based sites such as GitHub (GitHub Issues click-to-reveal long debug text) and GitLab.

<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 ...