Using <details> tags for HTML-only UI toggles

If you usually reach for JavaScript when trying to create show/hide toggle on elements, this post is for you.

This post is a reply to the tweet by Jake VanderPlas:

As the comments in the tweet mention, this is actually built into the HTML5.1 spec, not something that was specific to GitHub.

The other plus for this is that I would assume it's more accessible to users as it's built into the Browser / User Agent, so it'd be supported by accessibility tools.

But how do you actually use it? Let's say that we have a large list that only needs to be shown when necessary i.e a table of contents. All we need to do is wrap it in a <details> element:

<details>
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
    <li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</li>
    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum </li>
    <li>dolore eu fugiat nulla pariatur</li>
  </ul>
</details>

Which then renders as:

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit
  • sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
  • dolore eu fugiat nulla pariatur

However, we may want to specify a title rather than the one that the browser decides for us, so we can add the <summary element inside our <details>:

<details>
  <summary>lorem ipsum</summary>
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
    <li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</li>
    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum </li>
    <li>dolore eu fugiat nulla pariatur</li>
  </ul>
</details>

Which renders as:

lorem ipsum
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit
  • sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
  • dolore eu fugiat nulla pariatur

You can read more on the Mozilla Developer Network article <details>: The Details disclosure element

To commemorate this finding, I'm now over-using these toggles all over my website! This makes table of contents nicer, as well as the metadata about the post.

Written by Jamie Tanna's profile image Jamie Tanna on , and last updated on .

Content for this article is shared under the terms of the Creative Commons Attribution Non Commercial Share Alike 4.0 International, and code is shared under the Apache License 2.0.

#blogumentation #html #www.jvt.me.

Syndication

This post will be syndicated to these sites:

This post was filed under articles.

Has this content helped you? Please consider supporting me so I can continue to create content like this!

Related Posts

Other posts you may be interested in:

Interactions with this post

Interactions with this post

Below you can find the interactions that this page has had using WebMention.

Have you written a response to this post? Let me know the URL:

Do you not have a website set up with WebMention capabilities? You can use Comment Parade.