The New Details And Summary Tag

With this details-tag you can create foldable / collapsible content:

<details>
  <summary>This is a summary of the collapsible content</summary>
  And this is the very long content..
  It can have <strong>HTML</strong>-tags in it as well!
</details>

This is the content when it is collapsed:

And this is the content when it is not collapsed:

It’s handy for hiding logs in GitHub issues but you can still add them in a nice way for people who need them.

Browser support on desktop is not so great yet, but on mobile it is:

See caniuse.com/#feat=details.

Happy coding! – Found a mistake or a typo? Please submit a PR to my GitHub-repo.

Get my next post right in your inbox via Blogsend
(I don't get your email address so I can't spam you)

Like this post? Follow @adriaanvrossum on Twitter