One of my favorite new HTML5 tags, which has only recently been integrated into Chrome (as of version 12), is the details element. I’ll show you to use it in today’s quick tip.

What Does the details Tag Do?

It essentially allows us to show and hide content with the click of a button. You’re surely familiar with this type of effect, but, up until now, it had always been achieved with JavaScript. Imagine a heading with an arrow next to it, and when you click on it, additional information below becomes visible. Clicking the arrow again hides the content. This sort of functionality is very common in FAQ pages.

Browser Support
<details> element browser support

The details element allows us to omit the JavaScript entirely. Or, better put, it eventually will. Browser support is still a bit sparse…

An Example

So let’s dive in and learn how to use this new tag. We begin by creating a new details element.

<details>
</details>

Next, we need to give it a title, or summary of the content within.

<details>
<summary> Who Goes to College? </summary>
</details>

By default, in browsers that understand the details element, everything within it — other than the summary tag — will be hidden. Let’s add a paragraph after the summary.

<details>
<summary> Who Goes to College? </summary>

Your mom.
</details>

And there’s an actual, working demo.

But it’s just the most basic example. You can do pretty much anything you can imagine with details element…

<h3>Styling the Arrow</h3>

details summary::-webkit-details-marker {
color: green;
font-size: 20px;
}

Conclusion

It’s certainly a simple effect, but it sure is nice to have such a common feature built-in. Until we can reliably use the details element across all browsers, you can use this polyfill to provide fallback support. One final note: at the time of this writing, there doesn’t seem to be a way to toggle the contents with a keyboard. This could potentially present some accessibility issues.

LEAVE A REPLY

Please enter your comment!
Please enter your name here