Simple tree control

download

HTML tree controls are often bit complicated than it should be. But the above tree control is very simple. It also has some animated effect. If you have simple tree to display in your user interface this tree will be a good starting point. Basically the tree is a structured list nested in to layers.

<div class="treeControl">
        <ul>
            <li><a class="nodata" onclick="treeColapse(this)"> </a> <a class="treeNode" onclick="treeColapse(this)">lev1-one</a></li>
            <li><a class="minus" onclick="treeColapse(this)"> </a> <a class="treeNode" onclick="treeColapse(this)">lev1-two</a>
            <ul>
                <li><a class="nodata" onclick="treeColapse(this)"> </a> <a class="treeNode" onclick="treeColapse(this)">lev2-one</a></li>
                <li><a class="nodata" onclick="treeColapse(this)"> </a> <a class="treeNode" onclick="treeColapse(this)">lev2-two</a></li>
                <li><a class="nodata" onclick="treeColapse(this)"> </a> <a class="treeNode" onclick="treeColapse(this)">lev2-three</a></li>
            </ul>
            </li>
            <li><a class="nodata" onclick="treeColapse(this)"> </a> <a class="treeNode" onclick="treeColapse(this)">level-three</a></li>
        </ul>
   </div>

The code above will display a tree looks like following.