Some days back my dear friend nikhil(chubey sahb aka Mungeri lal) asked me “Paaji how to build a drop down like google code and load url on click”.

Its very easy we can build this within 5 minutes using jQuery.so here it goes..

If you see any room for improvement, or if you can add something than go ahead and comment and I will definitely give it a look for possible inclusion.

Setup

Include jQuery in your html file, you can download it from here Download jQuery.

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

Markup

Time to write some html and css.

Tree
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<!--
.collapse{display:none}
-->
<ul id="tree">
	<li> <a href="#">First</a>
<ul class="collapse">
	<li> <a href="your.html">First Child</a></li>
	<li> <a href="your.html">First Second Child</a></li>
	<li> <a href="your.html">First Third Child</a></li>
</ul>
</li>
	<li> <a href="#">Second</a>
<ul class="collapse">
	<li> <a href="your.html">Second Child</a></li>
	<li> <a href="your.html">Second Second Child</a></li>
</ul>
</li>
	<li> <a href="#">Third</a>
<ul class="collapse">
	<li> <a href="your.html">Third Child</a></li>
	<li> <a href="your.html">Third Second Child</a></li>
</ul>
</li>
</ul>

JQuery – The Rockstar

$(document).ready(function()
{
$('#tree li a').click(function()
{
mainObj	= $(this);

obj	= mainObj.next();
obj.toggle('slow'); // Remove slow If you dont want any animation
obj.find('a').click(function()
{
url	= $(this).attr('href'); // store href value
$('#showPage').load(url);// loading url and showing the content in a div of id showPage
return false;// its important 
})

});
})

I know its not very well explained but what can I do, am very bad in explaining things and some times lazy too..

If you see any room for improvement, or if you can add something than go ahead and comment and I will definitely give it a look for possible inclusion.