Simple Tree View script with jQuery

View Example Here

This is one of the first small scripts I wrote with jQuery way back when. It has been slightly modified over time, but the basis of how it works is the same.

The method for this requires slightly specific HTML. The “trigger” should be placed before the “container” to open in the DOM. Here is the HTML from my example:

<a class="trigger" href="#">July</a>
<ul>
	<li><a href="#">Post 1</a></li>
	<li><a href="#">Post 2</a></li>
	<li><a href="#">Post 3</a></li>
	<li><a href="#">Post 4</a></li>
	<li><a href="#">Post 5</a></li>
	<li><a href="#">Post 6</a></li>
</ul>

My example also includes class names on the UL tags. But this is only for styling and is not required for the script to work. Here is the javascript from the example:

$(document).ready(function(){
	$("a.trigger").click(function () {
		$(this).next().animate({
			 height: 'toggle', opacity: 'toggle'
		}, "slow");
		$(this).toggleClass("opened");
	});
	return false;
});

And that’s it in a nutshell. My example shows multiple levels done with this script. But remember that this is only a starting point for more of your own custom scripts. I just wanted to get you thinking. Enjoy!