Advertisement
HTML & CSS

Quick Tip: The Awesome Details Element

by

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.

image

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>
  <p> Your mom. </p>
</details>
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.

<details>
   <summary>Dig Into Dojo</summary>
   <img src="https://d2o0t5hpnwv4c1.cloudfront.net/1086_dojo/dojo.jpg" alt="Dojo" />
   <div>
      <h3> Dig into Dojo: DOM Basics </h3>
      <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.  			
     </p>
   </div>
</details>
image

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

body { font-family: sans-serif; }
	
details {
  overflow: hidden;
  background: #e3e3e3;
  margin-bottom: 10px;
  display: block;
}

details summary {
  cursor: pointer;
  padding: 10px;
}

details div {
  float: left;
  width: 65%;
}

details div h3 { margin-top: 0; }

details img {
 float: left;
 width: 200px;
  padding: 0 30px 10px 10px;
}
image

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.

details summary::-webkit-details-marker {
  color: green; 
  font-size: 20px;
}
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.


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.

Related Posts
  • Web Design
    Complete Websites
    Building the Responsive Timeline Portfolio PagePortfolio thumb
    During this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery.Read More…
  • Code
    JavaScript & AJAX
    JavaScript Tools of the Trade: JSBinJsbin retina preview
    We've all been there. There are times when you simply want to throw some JavaScript code up and see how it works. Sure, you could go through the hassle of:Read More…
  • Web Design
    Case Studies
    How They Did It: Typekit's New HomepageTypekit retina
    Typekit recently redesigned their homepage with some new services in mind. When Typekit joined Adobe, they set out to bring us a new way to handle fonts on the web. Not only did they create a fairly simple way to embed fonts on the web, but they have now officially launched a desktop sync option, which allows Creative Cloud subscribers to sync fonts to their computer directly from Typekit. This has been in a beta form for a while now, and provides a much easier route to local fonts than finding them elsewhere!Read More…
  • Code
    HTML & CSS
    Intro to Shadow DOMShadow dom retina preview
    Take any modern web page and you will notice that it invariably contains content stitched together from a variety of different sources; it may include the social sharing widgets from Twitter or Facebook or a Youtube video playing widget, it may serve a personalized advertisement from some ad-server or it may include some utility scripts or styles from a third party library hosted over CDN and so on. And if everything is HTML based (as is preferred these days) there is a high probability of collisions between the markup, scripts or styles served from various sources. Generally, namespaces are employed to prevent these collisions which solve the problem to some extent, but they don't offer Encapsulation.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Preparing the MarkupCreating wordpress theme from html 400
    Last year I did a small (and admittedly very un-scientific) survey among other WordPress developers. What I wanted to know was this: When they built their first WordPress theme, how did they do it? Did they hack an existing theme or did they start with their own static HTML and turn it into a theme? The majority of people I spoke to used the second approach - they were all experienced frontend developers who had built sites using HTML and CSS, and found it easiest to take their existing HTML files and convert them to a theme. Two of the people I spoke to were lecturers or teachers, and told me that this is the approach they use with students. So in this series I'm going to show you how to do just that.Read More…