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 + Enterto 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.
1 |
|
2 |
<details>
|
3 |
|
4 |
</details>
|
Next, we need to give it a title, or summary of the content within.
1 |
|
2 |
<details>
|
3 |
<summary> Who Goes to College? </summary> |
4 |
</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.
1 |
|
2 |
<details>
|
3 |
<summary> Who Goes to College? </summary> |
4 |
<p> Your mom. </p> |
5 |
</details>
|
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.
1 |
|
2 |
<details>
|
3 |
<summary>Dig Into Dojo</summary> |
4 |
<img src="https://d2o0t5hpnwv4c1.cloudfront.net/1086_dojo/dojo.jpg" alt="Dojo" /> |
5 |
<div>
|
6 |
<h3> Dig into Dojo: DOM Basics </h3> |
7 |
<p>Maybe you saw that tweet: “jQuery is a gateway drug. It leads to full-on JavaScript usage.” Part of that addiction, I contend, is learning other JavaScript frameworks. And that’s what this four-part series on the incredible Dojo Toolkit is all about: taking you to the next level of your JavaScript addiction.
|
8 |
</p>
|
9 |
</div>
|
10 |
</details>
|
Next, we'll give it just a touch of styling.
1 |
|
2 |
body { font-family: sans-serif; } |
3 |
|
4 |
details { |
5 |
overflow: hidden; |
6 |
background: #e3e3e3; |
7 |
margin-bottom: 10px; |
8 |
display: block; |
9 |
}
|
10 |
|
11 |
details summary { |
12 |
cursor: pointer; |
13 |
padding: 10px; |
14 |
}
|
15 |
|
16 |
details div { |
17 |
float: left; |
18 |
width: 65%; |
19 |
}
|
20 |
|
21 |
details div h3 { margin-top: 0; } |
22 |
|
23 |
details img { |
24 |
float: left; |
25 |
width: 200px; |
26 |
padding: 0 30px 10px 10px; |
27 |
}
|
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
openattribute to thedetailselement:<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.
1 |
|
2 |
details summary::-webkit-details-marker { |
3 |
color: green; |
4 |
font-size: 20px; |
5 |
}
|
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.
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.
