Super Tiny jQuery Tree View Plugin - Good Tree

File Size: 38.7KB
Views Total: 6016
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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>
<li>Submenu Item 1</li>
<li>Submenu Item 2</li>
<li>Submenu Item 3</li>
<li> <span>Menu Item 2</span>
<li> <span>Submenu Item 1</span>
<li>Sub Submenu Item 1</li>
<li>Sub Submenu Item 2</li>
<li><span>Menu Item 3</span></li>

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 > {
background-image: url(images/contract_icon.png);
.focus {
background-color: #eee;

4. Call the plugin

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

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