Click here to Skip to main content
14,690,503 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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>
<span class="numberofcourse" title="Number of courses"> (0)</span>
</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>
<span class="numberofcourse" title="Number of courses"> (0)</span>
</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>
<span class="numberofcourse" title="Number of courses"> (0)</span>
</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>
<span class="numberofcourse" title="Number of courses"> (0)</span>
</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>
<span class="numberofcourse" title="Number of courses"> (0)</span>
</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>
<span class="numberofcourse" title="Number of courses"> (2)</span>
</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>
<span class="numberofcourse" title="Number of courses"> (0)</span>
</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
Posted

1 solution

Dear Regards,
Did you make this work? Actually I'll need to do the same thing at my university moodle. Please contact my at mauricio_box123@hotmail.com .
Excuse me for English mistakes, i'm from Brazil and English is my second languague,In fact i'm learning this language.
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900