JavascriptToolbox.com Now Available!

Almost all of my javascript code has been moved over to its new home at The Javascript Toolbox. Please go there to find the latest scripts, information, etc. These pages will remain here for a while for historical purposes in case anyone needs a production copy of old code.

DHTML Tree

[Toolbox] [Example] [Source] [Documentation]

Implementing the DHTML Tree is extremely simple. Follow the steps below to have it up and running in your page in no time!

Include mktree.js in your page
- For example, in the <HEAD> of your page, put the following:
  <SCRIPT SRC="mktree.js" LANGUAGE="JavaScript"></SCRIPT>
Include mktree.css in your page
- For example, in the <HEAD> of your page, put the following:
  <LINK REL="stylesheet" HREF="mktree.css">
Set CLASS="mktree" in your <UL>
- For example, change your root <UL> tag to this:
  <UL CLASS="mktree">

That's it! That's all that is needed to make your unordered list an expandable and collapsable tree.

Controlling The Tree

Expanding All
- To have a link or button which fully expands your tree, do the following:
  1. Setup your tree as above
  
  2. In addition to a CLASS attribute in your UL tag, also give an ID attribute. For example:
  <UL CLASS="mktree" ID="tree1">
  The ID must be unique on the page, that is, no other tag can share the same ID
  
  3. Fire a javascript function call (most likely via onClick) like this:
  expandTree('tree1');
Collapsing All
- To have a link or button which fully collapses your tree, do the following:
  1. Setup your tree as above
  
  2. In addition to a CLASS attribute in your UL tag, also give an ID attribute. For example:
  <UL CLASS="mktree" ID="tree1">
  The ID must be unique on the page, that is, no other tag can share the same ID
  
  3. Fire a javascript function call (most likely via onClick) like this:
  collapseTree('tree1');
Opening to a node
- To have a link or button which fully collapses your tree, do the following:
  1. Setup your tree as above
  
  2. In addition to a CLASS attribute in your UL tag, also give an ID attribute. For example:
       <UL CLASS="mktree" ID="tree1">
  The ID must be unique on the page, that is, no other tag can share the same ID
  
  3. Any node which you will want to expand to needs its own unique ID. For example, somewhere in your tree:
       <LI ID="node234">
  
  4. Fire a javascript function call (most likely via onClick) like this:
       expandToItem('tree1','node234');

Custom Classes

By default, this script uses 5 classes defined in the css file: mktree, liClosed, liOpen, liBullet, and bullet.
If you want to change the class names used - perhaps because you want to include different CSS files on different pages - you can redefine these classes in a script block anywhere in your page.

For example, in the HEAD of your page:

<SCRIPT LANGUAGE="JavaScript">
var treeClass = "myTreeClass";  // instead of mktree
var nodeClosedClass = "closed"; // instead of liClosed
var nodeOpenClass = "open";     // instead of liOpen
var nodeBulletClass = "bullet"; // instead of liBullet
var nodeLinkClass = "link";     // instead of bullet
</SCRIPT>

These are global variables and will affect any tree on the page.

Customizing the CSS

The CSS file is fairly simple, so it should be easily editable by anyone with CSS experience. Bullet image filenames can be changed here, as well as font sizes for text at different levels of the tree, and spacing amounts. Be careful. The CSS is the heart of all the functionality, so messing around with it could break things in ways you don't expect ;)