//The plugin
jQuery.fn.quickTree = function() {
return this.each(function(){

//set variables
var $tree = $(this);
var $roots = $tree.find(‘li’);

//set last list-item as variable (to allow different background graphic to be applied)
$tree.find(‘li:last-child’).addClass(‘last’);

//add class to allow styling
$tree.addClass(‘tree’);

//hide all lists inside of main list by default
$tree.find(‘ul’).hide();

//iterate through all list items
$roots.each(function(){

//if list-item contains a child list
if ($(this).children(‘ul’).length > 0) {

//add expand/contract control
$(this).addClass(‘root’).prepend(”);

}
$(this).click(function(evt){
evt.stopPropagation();
});

}); //end .each

//handle clicking on expand/contract control
$tree.find(’span.expand’).toggle(
//if it’s clicked once, find all child lists and expand
function(){
$(this).toggleClass(‘contract’).nextAll(‘ul’).slideDown();
},
//if it’s clicked again, find all child lists and contract
function(){
$(this).toggleClass(‘contract’).nextAll(‘ul’).slideUp();
}
);
});
};

I follow the way given by Scott and it works perfectly but when i create another treeview in the same page, one of the treeviews does not work the way i intended, it expands and then collapses immediately. How do i prevent this problem? Thank you for any help!

I would like a way to specify that the page open to expand to level (x). Is this a difficult mod?

Thanks.

It’d be nice if users could click a link/button to expand the entire tree – any ideas?

eg

$(‘.expandall’).click(function () {
do stuff
});