DHTML Expandable and Collapsible Tree from JavascriptToolbox.com

Overview

Documentation

Notes

Source

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!

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>
```
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">
```
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:

Setup your tree as above
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
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:

Setup your tree as above
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
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:

Setup your tree as above
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
Any node which you will want to expand to needs its own unique ID. For example, somewhere in your tree:
```
<li id="node234">
```
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 ;)

Navigation Home Libraries iGoogle Gadgets Javascript Best Practices Support Resources / Links Donate! About Me AJAX Toolbox jQuery jQuery Tips Context Menu Plugin jQuery Cheat Sheet Libraries Calendar Popup Checkbox Group Data Dumper Data Validation Date Functions DHTML Tree Draggable Iframes Dependent Select Boxes Form Functions Object Position Option Transfer Popups (In-Page DIV) Selectbox Functions Table Sorting And Utils Util/DOM/CSS/Event doctype [?] [strict] [loose] [none]	DHTML Expandable and Collapsible Tree
	Overview Documentation Notes Source 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! 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> 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"> 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: Setup your tree as above 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 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: Setup your tree as above 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 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: Setup your tree as above 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 Any node which you will want to expand to needs its own unique ID. For example, somewhere in your tree: <li id="node234"> 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 ;)
All Contents Copyright © Matt Kruse

Navigation

jQuery

Libraries

doctype [?]