The current state of <details>

Beware: This post has been around for a while. The content may be outdated.

Content that you can either show or hide is a very common pattern we see and use a lot in websites. At this moment this means you'll have to write some additional code to build this feature, including some JavaScript for the toggling part.
But there's good news: HTML5 provides exactly this feature, without all the hassle. You just need a few lines of HTML and you're good to go.

The details element

Just a quick refresher: the element we’re talking about here is <details>.

As HTML5Doctor explains it:

“There are two relevant elements here: <details> and, optionally, <summary>. <details> is the wrapper for all the content we want to show and hide, and <summary> contains the — well, the summary and title of the section. Technically we don’t need the <summary>. If absent, the browser will use some default text (in Chrome: “details”).”

You can use the open attribute to make the content within details visible by default.

Example (closed)

Toggle me

Very exciting content

Code

<details>
    <summary>Toggle me</summary>
    <p>Very exciting content</p>
</details>

Example (open)

Toggle me

Very exciting content

Code

<details open>
    <summary>Toggle me</summary>
    <p>Very exciting content</p>
</details>

Browser support

Of course, as it usually goes with all things shiny and new, browser support isn’t great. So often we’re feeling held back from using a cool feature like this. In this particular case browser support isn’t that great, but luckily, it isn’t that bad either.

The current state

We went to investigate the current state and here are our findings:

  • Expanding / collapsing isn’t working yet in Internet Explorer and Microsoft Edge. But, you can always use a polyfill.

  • In Internet Explorer and Microsoft Edge, the details element isn’t keyboard accessible by default. But, this can be fixed by applying a tabindex of zero (or a polyfill will take care of this).

  • Firefox, Safari & Chrome do offer keyboard accessibility out of the box.

  • Firefox, Safari & Chrome have no trouble expanding or collapsing the contents.

  • The element can be styled quite easily:

    • You can change color and size of the native arrows
    • You can even make your own arrows, through pseudo-elements or by setting a list-style-image
    • Note: IE needs summary to be set to display: block explicitly

  • If you’d really want, you can create an animation for the expanding or collapsing event. You could animate the max-height for example. Keep in mind that this isn’t a very flexible solution, and this will negatively impact rendering performance as well.

Styled example

So, next time you’re thinking about building an accordeon, it might be worth considering this details element.