Build A JavaScript Tree Control

Build A JavaScript Tree Control (cont'd)

Activate the Tree with JavaScript
The script only needs to set the a branch's display property to either "block" or "none" based on its current state (to show or hide its children) and it needs to exchange the open folder image for the closed folder image when the node is expanded. I've chosen to implement those operations in separate functions but you could easily combine them. It's a good idea to preload the images so they'll display more quickly. To do that, add the following <script> block to the <head> section of your Web page:

   <script language="JavaScript">
   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;
   }
   </script>

The showBranch() function creates a stylesheet object based on the argument supplied. It then toggles the display property to either "block" or "none" depending on whether the node is currently visible.

The swapImage() function does nearly the same thing as showBranch(). It first creates an HTML object based on the argument. It then checks the src property to see if the image currently displayed is the closed folder. The code uses the indexOf() function because both IE and Netscape 6 return a string containing the absolute path to the image for the src attribute.

Attach the Events
The only thing left to do is to attach the events to the triggers. Modify each of the triggers to include an onClick event that calls each of the functions in the script. Here's how to do that for the root nodes:

   <div class="trigger" 
      onClick="showBranch('branch1');
      swapFolder('folder1')">

And here's how to do the expandable child nodes:

   <span class="trigger"
      onClick="showBranch('branch5');
      swapFolder('folder5')">

Now that you know how to activate the control, the best way to see the results is to test it yourself. Although this example has only three levels (see the last node), you can create your own tree controls with any number of levels. Use tree controls to optimize the available screen real estate on your pages, secure in the knowledge that your users will immediately know how to interact with them.

Tom Duffy , DevX's JavaScript Pro, is an Associate Professor at Norwalk Community College, Norwalk, CT where he teaches Web Development and Java. Tom is also the Manager of the NCC Ventures Lab, the College's in-house Web design studio. You can reach him via e-mail at: tduffy@ncc.commnet.edu.

Previous: Adding the HTML

Next: Introduction

Introduction	Preparing the Style Sheet
Adding the HTML	Activate the Tree with JavaScript

Return to Get Help with DHTML Page

Return to Main Get Help Page

Problem: Screen real estate is at a premium on many Web pages. Developers need a way to present a lot of information in a limited space. But users need familiar user interface conventions. How do you get more information in a smaller space without confusing end users?

Solution: Build a familiar tree control using some simple style rules, a few graphics, and some JavaScript.

Find Out More
• Get the Code

• Try the Tree Control from This Article

• Using the Microsoft TreeView Designer in Visual Studio .NET

• About the Microsoft TreeView WebControl

• VisualASP (TM) Treeview Component

• Treeview.net JavaScript Applet

• Easy DHTML Treeview at CodeProject

	TALK BACK
HTML and JavaScript-based trees are becoming more common every day. Are you using tree controls already? Are you using a commercial version or did you roll your own. What do you think of this article's approach to implementing a tree control? Join the discussions at Web.dhtml.general or Web.dhtml.scripting to get answers, make comments, or help others with their problems.

Sponsored Links