Tree View Control using HTML5

Introduction

Tree View Control is a useful element for displaying a tree structure, for example: catalog of products, menu of site content, user groups etc. But there is no standard HTML tag to create it as for list box or edit box. Usually a Tree View control is created by JavaScript or CSS3. These methods require a lot of code. I have a simple idea to do this using the HTML5 tag <details>. Unfortunately this tag only supports Chrome and Safari web browsers, but I think in future all browsers will support the HTML5 standard.

Background

The main and simple idea is to use nest tags <details> and a left margin style for tree levels. The item of the Tree View control may be as a list tag or any other form tag: <div>, <p> etc. To insert a caption to tag <details> use the tag <summary>. Hint: you can use as normal text as links. See example:

Using the code

To insert this code only for Chrome or Safari web browser you may use PHP code like this:

if( strpos( $_SERVER['HTTP_USER_AGENT'], "Chrome") !== false || 
 strpos( $_SERVER['HTTP_USER_AGENT'], "Safari") !== false ){}

For example:

<details><summary>1. Node</summary>
<div style="margin-left:25px">1.1 Item</div>
<div style="margin-left:25px">1.2 Item</div>
<details style="margin-left:25px"><summary>1.3 Node</summary>
    <div style="margin-left:25px">1.3.1 Item</div>
    <div style="margin-left:25px">1.3.2 Item</div>
</details>
</details>
<details><summary>2. Node</summary>
<div style="margin-left:25px">2.1 Item</div>
<div style="margin-left:25px">2.2 Item</div>
</details>
<details><summary>3. Node</summary>
<div style="margin-left:25px">3.1 Item</div>
</details>

Points of Interest

I've created Tree View control for my site catalogofsoftware.com. You may see platforms as first level of tree, categories as second level of tree and sub categories as first level of tree.

See also:

• HTML5 tag <details>
• How to change appearance
• How to create Tree View Control by CSS3 only