Feature Detection and Styling For The HTML5 details Element

As I discussed in the previous article, the details and summary elements are excellent ways to create accordion interfaces on web pages. Until recently, features like this have required a mass of JavaScript. (Indeed, frameworks like JQuery UI have entire modules devoted to supporting them).

As I mentioned, there are a few issues to using details today, including lack of support in Firefox and IE. Thankfully, these are easy to solve with a combination of CSS and a little JavaScript feature detection and DOM manipulation.

The HTML

Adding style

You can apply CSS to the details and summary elements in the same way that you can do to everything else. To create broad compatibility between all modern browsers, start with this:

This duplicates the functionality of the details and summary elements for all browsers; the next step is to add in the open attribute when required to the details tag for browsers that do not yet do so:

Adding support with feature detection

The following script, written in JQuery and typically placed at the bottom of your page, does two things. First, it calls a simple browser feature check by attempting to create a details element with an open attribute in the DOM. If the check fails, the script adds a no-det class to the details element. User clicks on the summary child of this element will add remove an open attribute:

… which produces the result you see at the top of this article, in all modern browsers. I’ve added a little more CSS to this version, without vendor prefixes to save space: