doctype [?][strict] [loose] [none]
DHTML Expandable and Collapsible Tree
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
Expand All NodesTo have a link or button which fully expands all nodes on the tree, do the following:
Collapse All NodesTo have a link or button which fully collapses your tree, do the following:
Opening Branches To A Specific NodeTo have a link or button which will open the tree to find a specific node, do the following:
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:
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 ;)
|All Contents Copyright © Matt Kruse|