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! That's it! That's all that is needed to make your unordered list an expandable and collapsable tree.

Controlling The Tree
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 ;)