Creating jQuery Tree view without plugin

Simple and elegant web design is not much easier to achieve, that too with enormous amount of content to be presented to the users, it requires a lot of improvisation. Tree view menus and navigators are certainly the best choice as it saves a lot of space and imparts stylish look to any webpage. We will see about the basic tree view creation with html list elements and jQuery. Though there are complex jQuery tree view plugins, this could be achieved with just few lines of jQuery code.

Yep, that’s not the tree view I am talking about. Ok, Now lets us delve into the code. Tree views rely heavily on jQuery and CSS. We will have a set of html unordered list elements and turn it into tree view with CSS and jQuery.

HTML CODE

<div class="tree">
<button id="all">Toggle All</button>

<ul>
	<li><a>First Level</a>
	<ul>
		<li><a>Second Level</a></li>
		<li><a>Second Level</a></li>
		<li><a>Second Level</a></li>
	</ul>
	</li>
	<li><a>First Level</a>
	<ul>
		<li><a>Second Level</a>
	<ul>
		<li><a>Third Level</a></li>
		<li><a>Third Level</a></li>
		<li><a>Third Level</a>
	<ul>
		<li><a>Fourth Level</a></li>
		<li><a>Fourth Level</a></li>
		<li><a>Fourth Level</a>
	<ul>
		<li><a>Fifth Level</a></li>
		<li><a>Fifth Level</a></li>
		<li><a>Fifth Level</a></li>
	</ul>
	</li>
	</ul>
	</li>
	</ul>
	</li>
		<li><a>Second Level</a></li>
	</ul>
	</li>
		<li><a>First Level</a>
	<ul>
		<li><a>Second Level</a></li>
		<li><a>Second Level</a></li>
	</ul>
	</li>
</ul>
</div>

So our html is basically a nested list elements and each level will become a node of the treeview, which will be arranged and accessed with CSS and jQuery respectively.

jQuery CODE

$( document ).ready( function( ) {
	$( '.tree li' ).each( function() {
		if( $( this ).children( 'ul' ).length > 0 ) {
			$( this ).addClass( 'parent' );     
		}
	});

	$( '.tree li.parent > a' ).click( function( ) {
		$( this ).parent().toggleClass( 'active' );
		$( this ).parent().children( 'ul' ).slideToggle( 'fast' );
	});

	$( '#all' ).click( function() {

		$( '.tree li' ).each( function() {
			$( this ).toggleClass( 'active' );
			$( this ).children( 'ul' ).slideToggle( 'fast' );
		});
	});

});

This is what we do with the jQuery

1. We traverse through all the list elements using .each() and check if there is UL ( i.e child unordered list ), if it is present we set a class for the list elements that will become the parent of the UL present with in it.

2. We bind the click function to the list elements with class name “parent”, then we use .toggleClass() to make the list element active an inactive with each click we make. We also use .slideToggle() that expands and collapses the treeview.

3. Finally a click event to toggle the expanding and collapsing of the entire tree view.

CSS is included with the download, which is pretty much a basic stuff.

Hope you like it..