HTML5: The details and summary elements

When I was building the companion website for my book HTML5 Multimedia: Develop and Design, I decided to use the details and summary elements to hide and display the links to the code examples for each chapter.

As it turns out, these useful elements aren’t widely supported across major browsers, but you can get them to work as they should using a little bit of jQuery and regular JavaScript.

What these elements are for

The HTML5 Specification states that:

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

A details element usually contains a summary element that:

represents a summary, caption, or legend for the rest of the contents of the summary element’s parent details element, if any.

So basically the details element will contain some “extra information” that you will initially want hidden, that a user can display and read should they want to by clicking on the summary element.

If the summary element is not present within a details element, the browser should provide its own legend, e.g. “Details” or “More info”.

In addition, the details element has a Boolean attribute open, which, if present, indicates that the entire contents of the details element are to be displayed, otherwise only the summary element is displayed.

How useful.

Support, Detection and Implementation

As mentioned above, browser support for the details and summary elements is rather poor, with only Google Chrome actually supporting them at all. This of course means that you need to detect whether a browser supports the elements, and if not, to perform some (in this case) jQuery in order to mimic the expected behaviour.

When searching for a JavaScript method of detecting browser support for these elements, I came across an excellent snippet by Mathias Bynens which basically does just that. I’ve created a small JavaScript source file that contains Mathias’ code for convenience.

All you need to do is to call Mathias’ isDetailsSupported() function, check the return value, and if it’s not supported do the following:

<script>
   $(function() {
      if (!isDetailsSupported) {
         $('details:not([open]) p').hide();
         $('details summary').click(function() {
            $(this).siblings('p').slideToggle('slow'); });
         }
      });
</script>

This simply hides all the p elements contained within the details element (that do not have the open attribute present), and when the summary element is clicked, its neighbouring p elements are displayed using jQuery’s slideToggle method.

Note: Hiding the contents via JavaScript will ensure that the content is not inaccessible if the user has JavaScript disabled

I’ve put together a working example so you can see it in action.

This method also works on older versions of Internet Explorer.

Google Chrome’s marker

Chrome is the only browser that natively supports the details and summary elements and it conveniently adds a small arrow to the left of the summary element to indicate that it can be clicked on.

Should you wish to remove this arrow (you might want to implement your own), you can simply add the following CSS:

details summary::-webkit-details-marker { display:none; }

Summary

The details and summary elements are a great addition to the HTML5 specification as many’s the time developers want to add “more info” type buttons and links to sites that reveal hidden text. These new elements support that functionality natively and make its implemention much easier.

The current poor support across browsers is an issue, although as I have shown, you can mimic the behaviour with jQuery and JavaScript. As always, the decision whether it currently suits your requirements is up to you.