Download

Latest version: 0.1 (20-AUG-2009)

Uncompressed jquery.simpletreeview.js (4.66 KB)
Minified jquery.simpletreeview.min.js (1.48 KB)

Overview

The jQuery SimpleTreeView plugin turns any multi-levels unordered list into a collapsable and expandable treeview. The plugin was created with the idea of replicating the archives widgets sometimes found on blogs.

How to Use

First download the Javascript file and put it in a folder on your Web server.

Then, for a basic tree view, just call the simpletreeview() method on the ul object you want to transform.

Options

Here's a list of the default options:

			open:  "▼",	// HTML string to display for the opened handle
			close: "►",	// HTML string to display for the closed handle 
			slide: false,		// Boolean flag to indicate if node should slide open/close
			speed: 'normal',	// Speed of the slide. Can be a string: 'slow', 'fast', or a number of milliseconds: 1000
			collapsed: false,	// Boolean to indicate if the tree should be collapsed on build
			collapse: null,		// A node to collapse on build. Can be a string with indexes: '0.1.2' or a jQuery ul: $("#tree ul:eq(1)")
			expand: null		// A node to expand on build. Can be a string with indexes: '0.1.2' or a jQuery ul: $("#tree ul:eq(1)")

Demos

Basic Sitemap Demo

A sitemap with the basic simpletreeview() method applied to it: 

			$(document).ready(function() {
				$("ul#sitemap").simpletreeview();
			});

Blog Archives Demo

Expand! Collapse!

The default options can be overridden to customize the treeview and it's behavior: 

			var archives = $("#archives").simpletreeview({
				open: '<span style="color: #900;">&darr;</span>',
				close: '<span style="color: #090;">&rarr;</span>',
				slide: true,
				speed: 'fast',
				collapsed: true,
				expand: '0.0'
			});

You can also use the expand() or collapse() method on the treeview to expand/collapse the specified node. 

		$("a#expandtest").click(function() {
			archives.expand($("#archives > li:eq(1) > ul > li:eq(1) &jt; ul")); // Same as '1.1'
		});

		$("a#collapsetest").click(function() {
			archives.collapse('1.1'); // Same as "ul#archives > li:eq(1) > ul > li:eq(1) > ul"
		});