<details>

Toggling the visibility of content used to be quite tricky to do. Either you used some wonky CSS hacks with hidden checkboxes and labels, or you used JavaScript. Well, this is about to change thanks to a new HTML5 element called details.

Browser support

The bad news is, browser support for this element is not perfect yet.¹ If you are on Firefox, IE or Opera Mini, you will not see the examples below. The good news is, the details element degrades very nicely — on unsupported browsers, the content is simply shown and you cannot toggle it. This is not a problem for most use cases, users just have to deal with seeing the additional content by default.

There is a polyfill² which supports Firefox and IE8+, but I would encourage you to have a think about simply not using it.³

Using details

The most basic markup for the details element looks like this:

<details>
    <p>This content is hidden from view, and only visible on click.</p>
</details>

which renders this:

So, what’s going on here? When you click the toggle button, the browser adds an open attribute to the details element and the content is visible. The markup looks like this:

<details open>
    <p>This content is visible.</p>
</details>

The summary Element

Chrome renders the default text for the toggle button as “Details”. While that’s an okay thing to do, you might want to change it to something a bit more descriptive. Thankfully, this is easily done with the summary element:

<details>
    <summary>Show/Hide Content</summary>
    <p>This content is hidden from view, and only visible on click.</p>
</details>

This is the details element without any CSS. Lets try enhancing it!

CSS Shenanigans

Dynamic Summary Text

Right now, the summary is static and always shows “Show/Hide Content” no matter if it’s open or closed. Using CSS pseudo elements we can change that! First, the markup (notice the empty summary tag):

<details>
    <summary></summary>
    <p>This content is hidden from view, and only visible on click.</p>
</details>

Now, the styling:

summary:after {
    content: "Show content";
}

details[open] summary:after {
    content: "Hide content";
}

And the result:

Quite nice, huh?

Animation

And to finish it off, lets add a fade in animation to the content. The markup stays the same as with the last example, but the styling changes a bit. First, the keyframe animation:

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

Now lets add the animation to the content of the details:

details p {
    animation: fadein 250ms ease-out;
}

NOTE: I am omitting browser specific prefixes here, for the sake of clarity. Please don’t forget to add them in production!

Here is the result with animation:

Beautiful. I hope you enjoyed this post, if you have any questions don’t hesitate to contact me on Twitter!

Liked this post? Sign up for the weekly newsletter!

Be the first to know when a new article is posted and get an inside scoop on the most interesting news and the freshest links of the week. (I hate spam just as much as you do, so no spam, ever. Promise.)