Sliding menus with Jquery

Posted by Kumar Chetan Sharma – February 26, 2009

I have been avoiding Jquery for quite some time. I was just turning myself blind to Jquery. Jaquery? What Jquery? :-/

Damn it! I have been spelling jQuery as Jquery.

I wanted some thing similar to accordion effect. There are tons of JavaScript frameworks offering this but I didnt want myself to be again copying huge/minified file/s and then reading hell lot of documentations figuring out how and why and ….

Phew #:-S

Now following is a snippet of code from my dear Kaddu. Obviously you will need jQuery.

<html>
<head><title>Tree</title>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('.level-1').hide();
$('.top').css('cursor','pointer').bind('click',viewList);
});
this.viewList = function (){
var id	 = $(this).attr('id');
var spId = id.split('_');
$('#ul_'+spId[1]).slideToggle();
}
</script>
</head>
<body>
<ul>
<li class="top" id="li_1"> 1
<ul class="level-1" id="ul_1"> <li>1.1</li>
<ol>
<li>1.1.1</li>
<li>1.1.2</li>
<li>1.1.3</li>
</ol>
</ul>
</li>
<li class="top" id="li_2"> 2
<ul class="level-1" id="ul_2"> <li>2.1</li>
<ol>
<li>2.1.1</li>
<li>2.1.2</li>
<li>2.1.3</li>
</ol>
</ul>
</li>
<li class="top" id="li_3"> 3
<ul class="level-1" id="ul_3"> <li>3.1</li>
<ol>
<li>3.1.1</li>
<li>3.1.2</li>
<li>3.1.3</li>
</ol>
</ul>
</li>
</ul>
</body>
</html>

Now, you can change lis to divs to spans to ps or what not. You just need IDs and thats it. You have a sliding menu.