Logo
doctype [?]
[strict] [loose] [none]

DHTML Expandable and Collapsible Tree

Documentation

Basic Setup

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

  1. Include the Javascript source in your page. For example, in the <head> of your page, put the following:
    <script type="text/javascript" src="mktree.js"></script>
  2. Include the CSS file in your page. For example, in the <HEAD> of your page, put the following:
    <link rel="stylesheet" href="mktree.css" type="text/css">
  3. Set class="mktree" in your <UL>. For example, change just 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

Expand All Nodes

To have a link or button which fully expands all nodes on the 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');

Collapse All Nodes

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 Branches To A Specific Node

To have a link or button which will open the tree to find a specific node, 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 CSS Classes

By default, this script uses 5 CSS 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 type="text/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 ;)