Simple TreeView

You will see many different scripts dealing with treeview but most of them are complex. Today I propose a very simple script based on CSS and a few background images to give the tree a pleasant and simple look.

If you want to see the live result (we believe this is the best way to learn what is the script about), try it here (new window).

Code source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="treeview.css" />
<script type="text/javascript" src="treeview.js"></script>
</head>
<body>

<dl class="tree">
<dt id="fold1" onclick="javascript:openclose(0);return false;">Folder 1</dt>
<dd id="fold1file">
<a href="#">file 1</a><br />
<a href="#">file 2</a><br />
<a href="#" class="end">file 2</a>
</dd>

<dt id="fold2" onclick="javascript:openclose(1);return false;">Folder 2</dt>
<dd id="fold2file"><a href="#">file 1</a><br />
<a href="#">file 2</a><br />
<a href="#" class="end">file 2</a>
</dd>

</dl>

</body>
</html>

download the file

The External Javascript code (treeview.js)

//Array of folders and respective boolean values - add more if you need more:
var folders= new Array('fold1','fold2');
var opened= new Array('0','0');

function openclose(folder)
{
	if(opened[folder] == 0)
	{

//retrieve the id of the folder field and change the background image and height size
		obj = document.getElementById(folders[folder]);
		obj.style.background = '#ffffff url(\'minus.gif\') no-repeat left';
		obj.style.height = '32px';

//Make the children visible
		obj = document.getElementById(folders[folder] + 'file');
		obj.style.height = 'auto';
		obj.style.visibility = 'visible';

		opened[folder] = 1;
	
	}
	else
	{
//Same as above but back to initial position	
		obj = document.getElementById(folders[folder]);
		obj.style.background = '#ffffff url(\'folder.gif\') no-repeat left';
		obj.style.height = 'auto';

		obj = document.getElementById(folders[folder] + 'file');
		obj.style.height = '0.1em';
		obj.style.visibility = 'hidden';
	
		opened[folder] = 0;
	}
}

download the file

The External CSS file (treeview.css)

dl.tree dt{background:#ffffff url('folder.gif') no-repeat left;padding-left:20px;height:auto;cursor:pointer;text-decoration:underline;font-weight:bold;color:red;}
dl.tree dd{visibility:hidden;height:0.1em;overflow:hidden;margin-left:32px;}
dl.tree dd a{background:#ffffff url('link.gif') left no-repeat;padding-left:20px;border-left:1px dotted red;}
dl.tree dd a.end{border:0px;background:#ffffff url('endlink.gif') no-repeat left}

download the file

This script is opened to any additional features and it is a good start as it is simple, you can easily add nodes and levels to the tree. You may change the design by changing the background images which you can download here:

Webmaster Corner

The ClickBnk Code
Another Killer Product From Michael Jones, simply follow the Blueprint For Easy Online Wealth Using Click Bank...

Mass Article Control #1
Create Thousands Of Articles From only 1 Article and Have them Submitted Automatically With A brand New Submitter!

iPowerWeb
Incredible Membership Packages - Web Hosting!

→ Maverick Money Makers - Get Paid For Life!

Simple TreeView

Simple TreeView

Webmaster Corner

Categories