How often have you had to write some JavaScript to create an interactive widget that shows and hides some content? You might’ve even downloaded a whole JavaScript library to achieve such an effect. Well, it’s time writing service to rejoice! HTML5 provides a way to create this toggle feature with just a few lines of HTML and no JavaScript in sight (depending on the browser, of course, but we’ll come to that later). And so we introduce to you the <details> element. Here is what the spec has to say about <details>:

The details element represents a disclosure widget from which the user can obtain additional information or controls. — W3C HTML specification

Essentially, we can use <details> to create an accordion-like widget that the user can toggle open and closed. Inside <details>, we can put any sort of content we want.

Browser support

Before we go any further, you should know that currently, only Chrome supports the <details> element. Opera will support it soon, but in the meantime we’ll have to use some polyfills. So fire up Chrome and let’s take a peek.

Using <details>

There are two relevant elements here: <details> and, optionally, <summary>. <details> is the wrapper for all the content we want to show and hide, and <summary> contains the — well, the summary and title of the section. Technically we don’t need the <summary>. If absent, the browser will use some default text (in Chrome: “details”). Let’s have a look at some markup: <details> <summary>Show/Hide me</summary> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </details> You can see this in action over at jsbin. It’s a simple example, but it shows off the toggle effect nicely. All this without JavaScript!

The open attribute

In the example above, the content is hidden when the page loads. We can make it visible by default by adding the boolean open attribute to the <details> element (jsbin example): <details open> <summary>Show/Hide me</summary> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </details> There is no closed attribute. It’s the default, so by omitting open, you imply closed.

The <summary> element

We’ve briefly seen <summary> in action. Since it is phrasing content, we can use inline elements such as <span> or <strong> inside it. Why thought would we do this? Perhaps for an extra styling hook or as the spec suggests: a label for a form element. At least it would be handy if it worked properly when implemented: <details> <summary><label for="name">Name:</label></summary> <input type="text" id="name" name="name" /> </details> Normally, clicking anywhere on the summary reveals the content of the <details> element. But in this example, clicking the summary doesn’t reveal the content because you’re actually clicking the <label>, which then focuses the <input> element — even though it’s hidden by the collapsed <details> element. Clearly this needs addressing, what do you think should happen? Maybe any browser vendors reading this can take a look :)

Nesting multiple <details> elements

You can nest <details> within <details> if you like, as seen in this perfectly valid example: <details> <summary>Question 1</summary> <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p> <details> <summary>Related documents</summary> <ul> <li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> <li><a href="#">Aliquam tincidunt mauris eu risus.</a></li> <li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> <li><a href="#">Aliquam tincidunt mauris eu risus.</a></li> </ul> </details> </details>

Example uses

So when could you use <details>? FAQs immediately spring to mind. People often use accordions for FAQs anyway, so they’re a great candidate for <details>. Also consider a table of contents. It could be a fixed area that scrolls with the content. Something like this perhaps? You could use <details> to toggle the comments section of a blog, member profiles, details of a download, complex forms, or in web applications as shown in this example from the spec: An example of the <details> element from the specIn fact, just looking around WordPress as I write, I see plenty of opportunities to use <details>. Let us know your thoughts and ideas in the comments.

Styling

How can we style this thing? Well, to style the disclosure widget itself in WebKit, you can apply some CSS to the pseudo-class ::-webkit-details-marker. You can see a little demo here: details summary::-webkit-details-marker { background: red; color: #fff; font-size: 500%; } We can also position the disclosure widget (to an extent). Here it is floated right. That’s about all we have initially. So how do we replace the disclosure widget with a custom icon? Using an attribute selector, you can detect whether the <details> element is open or closed and apply an appropriate background image. We do something similar in this example, except that instead of using a background image, we use the :after pseudo-element: summary::-webkit-details-marker { display: none } summary:after { background: red; border-radius: 5px; content: "+"; color: #fff; float: left; font-size: 1.5em; font-weight: bold; margin: -5px 10px 0 0; padding: 0; text-align: center; width: 20px; } details[open] summary:after { content: "-"; } The above example uses literal “+” and “-” characters as the disclosure widget. Depending on your styling, you might need to use :before instead of :after, but both pseudo-elements allow using an image. The details[open] attribute selector creates some interesting possibilities. And because we’re nice doctors, here’s a more polished example as seen in the screenshot below: Details element in ChromeStyled <details> element in ChromeIt would be interesting (though not necessarily good design) if you could use CSS transitions to animate the <details> opening and closing, but we can’t just yet.

Accessibility

Unfortunately, at the time of writing, <details> is not accessible via the keyboard. Steve Faulkner writes:

Bottom line is, currently no keyboard support and no usable information exposed to assistive technology.

Try it yourself. If you open a <details> element with your mouse, you can then keyboard through the content, but you should also be able to toggle the details open and shut with the keyboard. So it’s not ideal, but I’m sure the Chrome developers will sort this out soon (won’t you guys?).

Fallbacks

Before anyone exclaims that it doesn’t work in IE6, we know. Thanks to some clever people, we can provide elegant fallbacks though. As listed in this very handy collection of cross-browser polyfills, here are two fallbacks, both of which require jQuery: Many of you will be using Modernizr for feature detection, but Modernizr currently doesn’t check for details support. As detailed in the above fallback by Mathias, we can use the following JavaScript: <script> if (!('open' in document.createElement('details'))) { alert("No details"); } </script> Update: Thanks to Mathias for the comment. The above code is not 100% reliable as if returns false in some versions of Chrome. Instead, consider using this Modernizr snippet.

Why this type of interaction?

Not to look a gift horse in the mouth, but why is this widget in HTML5? Well, like so many other features of HTML5, creating these widgets is just easier with HTML5. Date pickers, sliders, progress indicators, and now accordions can be implemented easily and without JavaScript. Who knows what’s next? Native tabs would be nice :)

Summary

In this article, we’ve demonstrated how to use the <details> and <summary> elements. <details> is a new element and uses the <summary> element to create an interactive disclosure widget natively in the browser. Currently, <details> only works in Chrome, but hopefully this will change sooner rather than later. There is only one specific CSS trick we can use — ::-webkit-details-marker — but we can use plenty of other CSS to style it up. Let us know in the comments if you’ve got any experience or ideas about the <details> element.


Related news

Venerque mairie de versailles
Trout fishing report rotorua accommodation
Ultimos chismes de shakira y pique video
Mhlabatini magaliesburg accommodation
Sommaire automatique powerpoint 2011 display
Reservoir dozois quebec
Para que sirve el medicamento mexazolam
Hand painted antique high chairs
Ataques de ansiedad q hacer