Welcome to the mooTree demo page!
Let's ake a look at the examples provided, notice that the tree controllers may be easily styled through css!

First example

Something like a folder structure, the movie natural born killers is selected (has a css "selected" class).
Javascript

var mt_instance = new mooTree('mootree_folder');

Css

.moo_tree li {
  list-style-type: none;
}
.moo_tree .moo_tree_ctrl {
  float: left;
  width:28px;
  height:18px;
  cursor:pointer;
}
.moo_tree li.empty {
  background: url('/media/pages/mootree/folder.gif') no-repeat left center;
  padding-left: 28px;
}
.moo_tree .selected {
  background-color: #eee;
}
.moo_tree .folder .moo_tree_less {
  background: url('/media/pages/mootree/folder_less.gif') no-repeat left center;
}
.moo_tree .folder .moo_tree_more {
  background: url('/media/pages/mootree/folder_more.gif') no-repeat left center;
}

run javascript

Second example

This is a classical post archive example, where the tree is expanded in order to show the last article inserted.
Javascript

var mt_instance = new mooTree($('mootree_ex2'), {expand_top: true});

Css

.moo_tree li {
  list-style-type: none;
}
.moo_tree_ctrl {
  position: relative;
  float: left;
  margin-left: -12px;
  width:0px;
  height:0px;
  cursor: pointer;
}
.moo_tree_more {
  border-left: 5px solid #000;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  top: 6px;
}
.moo_tree_less {
  margin-left: -14px;
  border-left: 5px solid transparent;
  border-top: 5px solid #000;
  border-right: 5px solid transparent;
  top: 8px;
}

run javascript

Third example

Just to show how the expand_level option works. Here we expand the tree at level 1.
Javascript

var mt_instance = new mooTree('mootree_ex3', {expand_level:1});

Css

The same as the second example

run javascript

project page documentation download