Easily Customizable Simple pure CSS Treeview Example

Easily Customizable Simple pure CSS Treeview Example

Generally to display hierarchy of Data we use Treeview Control. The major advantages of a Treeview control is it loads data partially as per the event triggered. I mean if you have bulk data to display, Treeview is the best option. While loading data depending upon the user click you can expand the specific node with data. From my experience I can say Compare to Script based Treeview pure CSS Treeview performs better.

In this demo app I Created a expandable and collapsible Treeview using pure CSS and HTML. It’s simple and can easily Customizable according to your requirements. To develop this Treeview in my HTML page I am using Order list (OL). Where each li contains nodes as File or Folder. Refer my CSS structure here li presents a Folder. If a li is with the CSS Class “each-node” then it re-presents File. To achieve Sub nodes I am using ol element under Folder li.

In CSS for each node I am checking the file extension and showing page.png image. If required you can update this to specific image Files. To handle the toggle operation I am applying checked attribute over each checkbox. To prevent Checkboxes from user view I am hiding them using display: none. Using the Tree view you can create upto n number of nodes with any depth.

index.htm

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="main.css" />
<title>Easily Customizable Treeview using pure CSS</title>
</head>
<body>
<!-- Ordered list For Treeview -->
<ol class="tree-demo">
<li>
<label for="rootFolder">SEO</label><input type="checkbox" id="rootFolder" />
<ol>
<li>
<label for="onpageFolder">On-page SEO</label><input type="checkbox" id="onpageFolder" />
<ol>
<li class="each-node"><a href="#">Title Optimization</a></li>
<li class="each-node"><a href="#">Keywords Optimization</a></li>
<li class="each-node"><a href="#">Meta Tag Optimization</a></li>
</ol>
</li>
<li>
<label for="offpageFolder">Off-page SEO</label><input type="checkbox" id="offpageFolder" />
<ol>
<li class="each-node"><a href="#">Link Building</a></li>
<li class="each-node"><a href="#">Social Media Marketing</a></li>
<li class="each-node"><a href="#">Forum Posting</a></li>
<li class="each-node"><a href="#">Email Marketing</a></li>
</ol>
</li>
<li class="each-node"><a href="#">Others</a></li>
</ol>
</li>
<li class="each-node"><a href="#">Web Design</a></li>
<li class="each-node"><a href="#">Graphics Designing</a></li>
</ol>
</body>
</html>

main.css

body, li { background: #424242; color: #FFF; margin: 0; padding: 0; font-family: Verdana, Helvetica; }
img { border: none; }

/* CSS Treeview Styles */
ol.tree-demo { padding: 0 0 0 30px; width: 300px; }
li { position: relative; margin-left: -15px; list-style: none; }
li.each-node { margin-left: -1px !important; }
li.each-node a { background: url(page.png) 0 0 no-repeat; display: block; padding-left: 21px; color: #fff; text-decoration: none; }

/* Checking document type to Show page icon */
li.each-node a[href *= '.pdf']	{ background: url(page.png) 0 0 no-repeat; }
li.each-node a[href *= '.html']	{ background: url(page.png) 0 0 no-repeat; }
li.each-node a[href $= '.css']	{ background: url(page.png) 0 0 no-repeat; }
li.each-node a[href $= '.js']	{ background: url(page.png) 0 0 no-repeat; }

li input { position: absolute; left: 0; opacity: 0; margin-left: 0; cursor: pointer; z-index: 2; width: 1em; height: 1em; top: 0; }
li input + ol { background: url(Toggle-Expand.png) 40px 0 no-repeat; height: 1em; margin: -0.938em 0 0 -44px; }
li input + ol > li { display: none; margin-left: -14px !important; padding-left: 1px; }
li label { background: rgba(0, 0, 0, 0) url("Folder-Symbol.png") no-repeat scroll 12px 3px; padding-left: 36px; cursor: pointer; display: block; }
li input:checked + ol { background: rgba(0, 0, 0, 0) url("Toggle-Collapse.png") no-repeat scroll 40px 5px; height: auto; margin: -1.25em 0 0 -44px; padding: 1.563em 0 0 80px; }
li input + ol { position: relative; top: -3px; }
li input:checked + ol > li { display: block; margin: 0 0 0.125em; }
li input:checked + ol > li:last-child { margin: 0 0 0.063em; }

Required images

Folder-Symbol

page

Toggle-Collapse

Toggle-Expand