create a accordian style moodle course category list using jquery

See more:

jQuery

jQuery-UI

hi!
i am new to jquery,i want to create accordian style of the course category menu of moodle front page.

here is the html code

<div class="categorylist level0">
<div class="category">
<a href="http://localhost/moodle/course/category.php?id=3">camp</a>
 (0)
</div>
<div class="clearfloat"></div>
</div>
<div class="categorylist level1">
<div class="category">
<div class="indentation">
<a href="http://localhost/moodle/course/category.php?id=4">ug programs</a>
 (0)
</div>
</div>
<div class="clearfloat"></div>
</div>
<div class="categorylist level2">
<div class="category">
<div class="indentation">
<div class="indentation">
<a href="http://localhost/moodle/course/category.php?id=5">BS maths</a>
 (0)
</div>
</div>
</div>
<div class="clearfloat"></div>
</div>
<div class="categorylist level3">
<div class="category">
<div class="indentation">
<div class="indentation">
<div class="indentation">
<a href="http://localhost/moodle/course/category.php?id=6">BS maths 2011</a>
 (0)
</div>
</div>
</div>
</div>
<div class="clearfloat"></div>
</div>
<div class="categorylist level4">
<div class="category">
<div class="indentation">
<div class="indentation">
<div class="indentation">
<div class="indentation">
<a href="http://localhost/moodle/course/category.php?id=7">spring 2011</a>
 (0)
</div>
</div>
</div>
</div>
</div>
<div class="clearfloat"></div>
</div>
<div class="categorylist level0">
<div class="category">
<a href="http://localhost/moodle/course/category.php?id=1">Miscellaneous</a>
 (2)
</div>
<div class="clearfloat"></div>
</div>
<div class="categorylist level0">
<div class="category">
<a href="http://localhost/moodle/course/category.php?id=2">SCME</a>
 (0)
</div>
<div class="clearfloat"></div>
</div>
.

jquery code which i have tried is :

$(document).ready(function()
{
$categories = $(".categorylist");

for($x=1; $x<=$categories.length; $x++)
{
$(".categorylist.level"+$x).css("display", "none");
}

$(".categorylist").click(function()
{
$category = $(this).parents(".////categorylist");
$self = $($category).attr("class").split(" ")[1];

            $level = parseInt($self.split("")[5]);
            //if($level < $levels.length){
                $next = $level+1;
$(".categorylist.level1"+$next).slideToggle(300).siblings("display", "block").slideUp("slow");


return false;
});
});

but its not working.i want to create the accordian style for this.like when i click on the categorylist level0 then div of class categorylist level1 should be shown.and when i click on div of class categorylist level1 then categorylist level 2 should be shown. and so on...i want to create it dynamically beause there can be many categorylist levels..i want to create a toggle effect too.

i am not gettin how i would know when the user has clicked which categorylist level?.
please help me.i need it urgently.i have tried alot but it not working.

Regards,
honey