When I was building the companion website for my book HTML5 Multimedia: Develop and Design, I decided to use the
summary elements to hide and display the links to the code examples for each chapter.
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.
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 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.
Support, Detection and Implementation
As mentioned above, browser support for the
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.
All you need to do is to call Mathias’
isDetailsSupported() function, check the return value, and if it’s not supported do the following:
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
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
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:
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.