Click here to Skip to main content
12,550,735 members (48,300 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


5 bookmarked

Tree View Control using HTML5

, 19 Apr 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
How to create Tree View Control by HTML5 only.


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.


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><summary>2. Node</summary>
<div style="margin-left:25px">2.1 Item</div>
<div style="margin-left:25px">2.2 Item</div>
<details><summary>3. Node</summary>
<div style="margin-left:25px">3.1 Item</div>

Points of Interest

I've created Tree View control for my site 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:


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Ukraine Ukraine
No Biography provided

You may also be interested in...


Comments and Discussions

-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.161021.1 | Last Updated 19 Apr 2013
Article Copyright 2013 by Style-7
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid