HTML5 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:

[sourcecode language=”javascript”]
if (!(OPEN in document.createElement("details"))) {
// enable expand / collapse with JavaScript for unsupported browsers
}
[/sourcecode]

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:

[sourcecode language=”javascript”]
Y.one("body").delegate("click", function() {
var details = this.get(‘parentNode’);

details.getAttribute(OPEN) ? details.removeAttribute(OPEN) : details.setAttribute(OPEN, OPEN);
}, "summary");
[/sourcecode]

And the rest is just CSS:

[sourcecode language=”css”]details:not([open]) &gt; div
{
display: none;
}

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

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:

[sourcecode language=”css”]details summary::-webkit-details-marker
{
display: none;
}[/sourcecode]

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

[sourcecode language=”css”]summary::before
{
content: "+";
}

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

How to Use the HTML5 Details Enabler:

Script Assets:

[sourcecode language=”html”]
<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>
[/sourcecode]

Stylesheet:

[sourcecode language=”html”]
<link rel="stylesheet" href="html-5-details-element-enabler/html-5-details-element-enabler.css" />
[/sourcecode]

Initializer:

[sourcecode language=”javascript”]
YUI().use("html5-details", function (Y) {
var details = new Y.HTML5.Details();
details.enable();
});
[/sourcecode]

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 demo is here, and if you want to check other cool stuff, please, visit my experiments website.

Related Posts