HTML 5 Details Element Enabler

According to WhatWG, the “<details /> element represents a disclosure widget from which the user can obtain additional information or controls“. In brief, you can use it to create panelbar elements without JavaScript, as the expand / collapse functionality is native to it. Currently (October, 2011), the only browser which supports <details /> is Google Chrome, so if you are eager to start using this element on your pages, you can do so with the help of a few lines of JavaScript to make sure it works on all browsers.

The implementation I am going to present today assumes YUI library, but it can also be accomplished easily with jQuery or with pure JavaScript. Basically, the most important part of the script is the feature detection:

if (!(OPEN in document.createElement("details"))) {
// enable expand / collapse with JavaScript for unsupported browsers
}

The code above will check for native availability of expand / collapse functionality, and if it is not present in the browser, it will bind click event to the <summary /> element that will toggle the open attribute of it’s parent – the <details /> element:

Y.one("body").delegate("click", function() {
var details = this.get('parentNode');

details.getAttribute(OPEN) ? details.removeAttribute(OPEN) : details.setAttribute(OPEN, OPEN);
}, "summary");

And the rest is just CSS:

details:not([open]) > div
{
display: none;
}

details[open] > div
{
display: block;
}

By using the :not() selector we make sure that if the open attribute is added by default to the <details /> element, its content will be expanded.

In case we need a custom expand / collapse arrow instead of the default one provided in Google Chrome we can hide it by using a proprietary pseudo element:

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

… And then play with the ::before pseudo element of the <summary /> tag like this:

summary::before
{
content: "+";
}

details[open] summary::before
{
content: "-";
}

How to Use the HTML5 Details Enabler:

Script Assets:

<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
<script src="html-5-details-element-enabler/html-5-details-element-enabler.js"></script>

Stylesheet:

<link rel="stylesheet" href="html-5-details-element-enabler/html-5-details-element-enabler.css" />

Initializer:

YUI().use("html5-details", function (Y) {
var details = new Y.HTML5.Details();
details.enable();
});

The possibilities are numerous – you can apply cool transition effects for the expand / collapse, play with gradients and shadows, CSS3 makes most of the stuff really easy to achieve.

The HTML5 Details enabler is available for download from this link, the demo is here, and if you want to check other cool experiments, go to this page.

Advertisement