Accordion menu by Roshan

Here you can find a easy accordion menu.
http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html
You can download the files as well.

The first one is,
1. Get a p-tag with class of menu_head in the id firstpane, then attach a click function.
2. With this element, change css, background-image to down.png
3. then find next div with class menu_body and toggle slide with 300ms.
4. Then find all the siblings with div class of menu_body and slide up with slow speed.
5. Then find all the siblings of this element and change css backgroud-image to left.png

The second one is almost the same except mouseover function and sliding down div.menu_body with 500ms and sliding up all the siblings of div.menu_body with slow (600ms) speed.


$(document).ready(function()
{
 //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked 
 $("#firstpane p.menu_head").click(function()
    {
  $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
        $(this).siblings().css({backgroundImage:"url(left.png)"});
 });
 //slides the element with class "menu_body" when mouse is over the paragraph
 $("#secondpane p.menu_head").mouseover(function()
    {
      $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
         $(this).siblings().css({backgroundImage:"url(left.png)"});
 });
});

Thanks Roshanbh

Web Development Sandpit