Students get a Tuts+ subscription for just $45! Hurry limited offer.

Quick Tip: The Awesome Details Element


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.

Here's a two minute example of this sort of effect. (Type Control + Enter to process the JavaScript.)

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.

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

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.

Default Display

Go ahead and try the demo out in Chrome 12 or higher (as of November 17th, 2011).

Okay, let's do something a bit more practical. I want to display various Nettuts+ articles using the details element. We first create the markup for a single article.


Next, we'll give it just a touch of styling.


Please note that I'm showing you the open state for convenience, but, when the page loads, you'll only see the summary text.

If you'd prefer to be in this state by default, add the open attribute to the details element: <details open>

Styling the Arrow

It's not quite as straight-forward to style the arrow itself as we might hope. Nonetheless, it is possible; the key is to use the -webkit-details-marker pseudo class.

Styling the arrow

Should you need to use a custom icon, possibly the easiest solution is to hide the arrow (using the pseudo class above), and then either apply a background image to the summary element, or use the :after or :before pseudo elements.

View the final project.


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.