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.