Super Tiny jQuery Tree View Plugin - Good Tree

Good Tree is a tiny and easy-to-use jQuery plugin for quickly and easily create a tree view user interface widget for your project.

You might also like:

• jQuery Treemap Plugin for Hierarchical Data - jsTreemap
• jQuery Plugin for Tree Widget - jqTree
• Powerful and Multi-Functional jQuery Folder Tree Plugin  - zTree
• jQuery Flat Folder Tree Plugin - simplefolders

How to use it:

1. Include the latest jQuery libary and jQuery Good Tree on your web page

<script src="jquery-1.9.1.min.js"></script>
<script src="goodtree.plugin.js"></script>

2. The html

<ul id="tree">
<li> <span>Menu Item 1</span>
<ul>
<li>Submenu Item 1</li>
<li>Submenu Item 2</li>
<li>Submenu Item 3</li>
</ul>
</li>
<li> <span>Menu Item 2</span>
<ul>
<li> <span>Submenu Item 1</span>
<ul>
<li>Sub Submenu Item 1</li>
<li>Sub Submenu Item 2</li>
</ul>
</li>
</ul>
</li>
<li><span>Menu Item 3</span></li>
...
</ul>

3. The CSS

<style type="text/css">
#tree, #tree ul {
list-style-type: none;
}
#tree li > span {
margin-left: 20px;
}
#tree li > .goodtree_toggle {
position: absolute;
display: inline-block;
background-position: center;
background-repeat: no-repeat;
height: 16px;
width: 16px;
cursor: pointer;
}
#tree li > div.closed {
background-image: url(images/expand_icon.png);
}
#tree li > div.open {
background-image: url(images/contract_icon.png);
}
.focus {
background-color: #eee;
}
</style>

4. Call the plugin

<script type="text/javascript">
$(document).ready(function() {
var tree = $('#tree').goodtree({'setFocus': $('.focus')});
});
</script>

---

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.