How to create a W3C Validated Tree

Here is the first of many How to articles I will be posting on the Hudson Horizons blog!  This week we will discuss how to create a simple, quick W3C compliant tree.  You could use this tree to organize data or easily add links to use as some advanced navigation.

Let's go step and step and recreate my example here.

First step is to write the HTML on the page, lets start by creating the 4 main root elements:

<ul class="treedivul">
	<li>Root 1</li>
	<li>Root 2</li>
	<li>Root 3</li>
	<li>Root 4</li>
</ul>

Simple right, just a simple list. Now lets add a list inside the root elements to start forming the tree:

<ul class="treedivul">
	<li>
		Root 1
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
		</ul>
	</li>
	<li>
		Root 2
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
		</ul>
	</li>
	<li>
		Root 3
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
		</ul>
	</li>
	<li>
		Root 4
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
		</ul>
	</li>
</ul>

Ok now we have a very straightforward tree nothing special yet. So at this point you should have something that looks like this:

• Root 1
  • Item 1
  • Item 2
  • Item 3
  • Item 4
• Root 2
  • Item 1
  • Item 2
  • Item 3
  • Item 4
• Root 3
  • Item 1
  • Item 2
  • Item 3
  • Item 4
• Root 4
  • Item 1
  • Item 2
  • Item 3
  • Item 4

So now lets get the style elements in place. I am going to start by placing the plus (+) sign image at the start of each root node.
And also a little paper icon to show the items underneith, feel free to style this however you see fit.
Also you will want to give the plus (+) sign image and the subitem UL's an idea so you can control them via JavaScript:

<ul class="treedivul">
	<li>
   	<span class="trigger">
 			<img src="closed.gif" alt="Click to Expand/Collapse Categories" id="folder1" />
 		</span>
 		<span>Root 1</span>
		<ul class="branch" id="branch1">
			<li><img src="page.gif" alt="An Item" /><span>Item 1</span></li>
			<li><img src="page.gif" alt="An Item" /><span>Item 2</span></li>
			<li><img src="page.gif" alt="An Item" /><span>Item 3</span></li>
			<li><img src="page.gif" alt="An Item" /><span>Item 4</span></li>
		</ul>
	</li>
	<li>
   	<span class="trigger" onclick="">
 			<img src="closed.gif" alt="Click to Expand/Collapse Categories" id="folder2" />
 		</span>
 		<span>Root 2</span>
		<ul class="branch" id="branch2">
			<li><img src="page.gif" alt="An Item" /><span>Item 1</span></li>
			<li><img src="page.gif" alt="An Item" /><span>Item 2</span></li>
			<li><img src="page.gif" alt="An Item" /><span>Item 3</span></li>
			<li><img src="page.gif" alt="An Item" /><span>Item 4</span></li>
		</ul>
	</li>
	<li>
   	<span class="trigger" onclick="">
 			<img src="closed.gif" alt="Click to Expand/Collapse Categories" id="folder3" />
 		</span>
 		<span>Root 3</span>
		<ul class="branch" id="branch3">
			<li><img src="page.gif" alt="An Item" /><span>Item 1</span></li>
			<li><img src="page.gif" alt="An Item" /><span>Item 2</span></li>
			<li><img src="page.gif" alt="An Item" /><span>Item 3</span></li>
			<li><img src="page.gif" alt="An Item" /><span>Item 4</span></li>
		</ul>
	</li>
	<li>
   	<span class="trigger" onclick="">
 			<img src="closed.gif" alt="Click to Expand/Collapse Categories" id="folder4" />
 		</span>
 		<span>Root 4</span>
		<ul class="branch" id="branch4">
			<li><img src="page.gif" alt="An Item" /><span>Item 1</span></li>
			<li><img src="page.gif" alt="An Item" /><span>Item 2</span></li>
			<li><img src="page.gif" alt="An Item" /><span>Item 3</span></li>
			<li><img src="page.gif" alt="An Item" /><span>Item 4</span></li>
		</ul>
	</li>
</ul>

Okay so now we will want to focus on the javascript and CSS. To make life easier I will just put the CSS and JavaScript I am using below:

JavaScript:


//Set Open and Closed Images
var openImg = new Image();
openImg.src = "open.gif";
var closedImg = new Image();
closedImg.src = "closed.gif";

function showBranch(branch){
	var objBranch = document.getElementById(branch).style;
	if(objBranch.display=="block")
		objBranch.display="none";
	else
		objBranch.display="block";
}

function swapFolder(img){
	objImg = document.getElementById(img);
	if(objImg.src.indexOf('closed.gif')>-1)
		objImg.src = openImg.src;
	else
		objImg.src = closedImg.src;
}

CSS Style:

/* CSS Document */
.treediv
{
float:left;
clear:both;
}
	.treedivul
	{
	float:left;
	clear:both;
	margin:0 0 0 0;
	padding:0 0 0 0;
	}
	.treedivul li
	{
	list-style-type:none;
	float:left;
	clear:both;
	}

.trigger
{
	cursor: pointer;
}
	.trigger span
	{
	margin:0 0 0 0px;
	}
.branch
{
	display: none;
	float:left;
	clear:both;
}
	.branch span
	{
	margin:0 5px 0 0px;
	}

Okay now lets just plug in all the javascript calls and we are all set:

<ul class="treedivul">
		<li>
			<span class="trigger" onclick="showBranch('branch1');swapFolder('folder1')">
				<img src="closed.gif" alt="Click to Expand/Collapse Categories" id="folder1" />
			</span>
			<span>Root 1</span>
			<ul class="branch" id="branch1">
				<li><img src="page.gif" alt="An Item" /><span>Item 1</span></li>
				<li><img src="page.gif" alt="An Item" /><span>Item 2</span></li>
				<li><img src="page.gif" alt="An Item" /><span>Item 3</span></li>
				<li><img src="page.gif" alt="An Item" /><span>Item 4</span></li>
			</ul>
		</li>
		<li>
			<span class="trigger" onclick="showBranch('branch2');swapFolder('folder2')">
				<img src="closed.gif" alt="Click to Expand/Collapse Items" id="folder2" />
			</span>
			<span>Root 2</span>
			<ul class="branch" id="branch2">
				<li><img src="page.gif" alt="An Item" /><span>Item 1</span></li>
				<li><img src="page.gif" alt="An Item" /><span>Item 2</span></li>
				<li><img src="page.gif" alt="An Item" /><span>Item 3</span></li>
				<li><img src="page.gif" alt="An Item" /><span>Item 4</span></li>
			</ul>
		</li>
		<li>
			<span class="trigger" onclick="showBranch('branch3');swapFolder('folder3')">
				<img src="closed.gif" alt="Click to Expand/Collapse Help" id="folder3" />
			</span>
			<span>Root 3</span>
			<ul class="branch" id="branch3">
				<li><img src="page.gif" alt="An Item" /><span>Item 1</span></li>
				<li><img src="page.gif" alt="An Item" /><span>Item 2</span></li>
				<li><img src="page.gif" alt="An Item" /><span>Item 3</span></li>
				<li><img src="page.gif" alt="An Item" /><span>Item 4</span></li>
			</ul>
		</li>
		<li>
			<span class="trigger" onclick="showBranch('branch4');swapFolder('folder4')">
				<img src="closed.gif" alt="Click to Expand/Collapse Other" id="folder4" />
			</span>
			<span>Root 4</span>
		
			<ul class="branch" id="branch4">
				<li><img src="page.gif" alt="An Item" /><span>Item 1</span></li>
				<li>
					<span class="trigger" onclick="showBranch('branch5');swapFolder('folder5')">
						<img src="closed.gif" alt="Click to Expand/Collapse Item 2" id="folder5" />
					</span>
					<span>Item 2</span>
					<ul class="branch" id="branch5">
						<li><img src="page.gif" alt="An Item" /><span>Item 2.1</span></li>
						<li><img src="page.gif" alt="An Item" /><span>Item 2.2</span></li>
					</ul>
				</li>
				<li><img src="page.gif" alt="An Item" /><span>Item 3</span></li>
				<li><img src="page.gif" alt="An Item" /><span>Item 4</span></li>
			</ul>
		</li>
	</ul>

So that is it, again you can view the final outcome here
And download the Source Files here