The Power of the HTML5 <details> Element
HTML5 contains a number of intriguing new elements, designed to provide in markup what has up until recently been the domain of scripting. Of these one of the more powerful is the <details> element, which is designed to hide or show a block of text via a toggle.
The <details> element is a block element, and has the structure:
<details>
<summary><!-- summary content --></summary>
<!-- detailed content. -->
</details>For instance, suppose that you had a set of articles displayed on a page. You could use details sections as containers for these articles, with the summary block holding the titles of the respective articles:
<details>
<summary><b>XML Today Relaunches Service</b></summary>
<img src="Details1.PNG"/>
<p>The news site XMLToday.org relaunched its web presence with a new Drupal-based web theme, and an editorial shift to move towards a broader "big data" view of XML and related formats.</p>
</details>Listing 1. The <detail> element can hide and display both text and graphics.
Figure 1. A simple detail panel in closed and open positions.
The <summary> element is the HTML that is displayed regardless of whether the full content is shown or not, and it typically gets rendered with a "side" or "down" triangular indicator that, when clicked, will toggle between the shown and hidden views.
For instance, the following displays the word "Test" until clicked, at which point a dropdown showing the rest of the content gets displayed. Unlike typical drop downs, the resulting block is part of the text flow, so that the contents of the details effectively push down any following content.
Currently, the only browser to support the <details> element is Google Chrome, though given the state of HTML5 it is likely that other browsers will implement the element within the next twelve months.
While the individual <detail> element is useful, it really begins to come into its own when used in conjunction with list elements and containers in order to create a dynamic treeview control purely with HTML. Listing 2 illustrates such a treeview.
<html>
<head>
<title>Treeview Control</title>
</head>
<body>
<ul>
<li>
<details>
<summary>Listing 1</summary>
<ul>
<li>Listing 1-1</li>
<li>Listing 1-2</li>
</ul>
</details>
</li>
<li>
<details>
<summary>Listing 2</summary>
<ul>
<li>Listing 2-1</li>
<li>
<details>
<summary>Listing 2-2</summary>
<ul>
<li>Listing 2-2-1</li>
<li>Listing 2-2-2</li>
<li>Listing 2-2-3</li>
</ul>
</details>
</li>
<li>Listing 2-3</li>
</ul>
</details>
</li>
<li>
<details>
<summary>Listing 3</summary>
<ul>
<li>Listing 3-1</li>
<li>
<details>
<summary>Listing 3-2</summary>
<ul>
<li>Listing 3-2-1</li>
<li>Listing 3-2-2</li>
</ul>
</details>
</li>
</ul>
</details>
</li>
</ul>
</body>
</html>Listing 2. Treeview written using Details
Figure 2. A treeview image written using details.
The use of the <details> element makes it possible to create surprisingly complex data structures - tables with embedded subtables and accordian structures can both be handled with <details>. The key to making this work is the open attribute. When set to the value "open", the details section gets displayed, if it's not included at all, then the details section becomes hidden, except for the <summary>.
A bit of jquery code (Listing 3) illustrates the usage here - taking the same treeview, this code will close all other detail nodes, but only if the nodes aren't in the ancestor chain for the selected default. This makes what amounts to an accordion tree, where only one active node is open at any given time.
<html>
<head>
<title></title>
<style type="text/css">
details>summary {cursor:pointer;}
</style>
<script type="text/javascript" src="/lib/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("details").click(function(e){
var elt = e.currentTarget;
$.each($("details"),function(item){
var testElt = $("details")[item];
if (testElt==elt){}
else {$(testElt).removeAttr("open")}
});
$(elt).parents().attr("open","open");
});
});
</script>
</head>
<body>
<ul>
<li>
<details>
<summary>Listing 1</summary>
<ul>
<li>Listing 1-1</li>
<li>Listing 1-2</li>
</ul>
</details>
</li>
<li>
<details>
<summary>Listing 2</summary>
<ul>
<li>Listing 2-1</li>
<li>
<details>
<summary>Listing 2-2</summary>
<ul>
<li>Listing 2-2-1</li>
<li>Listing 2-2-2</li>
<li>Listing 2-2-3</li>
</ul>
</details>
</li>
<li>Listing 2-3</li>
</ul>
</details>
</li>
<li>
<details>
<summary>Listing 3</summary>
<ul>
<li>Listing 3-1</li>
<li>
<details>
<summary>Listing 3-2</summary>
<ul>
<li>Listing 3-2-1</li>
<li>Listing 3-2-2</li>
</ul>
</details>
</li>
</ul>
</details>
</li>
</ul>
</body>
</html>Listing 3. An accordion Treeview written using Details
Along with a few other elements such as <menu> or <control>, the <details> element is likely to be a heavily used component for creating rich web applications moving forward.
Recent comments