Lightweight Accordian in jquery

# Have a look at the tutorial for creating Accordian in Jquery with demo of example and download link.

# Lets have a look at each step and sytax.

$(document).ready(function(){

 $(".accordion h3:first").addClass("active");
 $(".accordion p:not(:first)").hide();

 $(".accordion h3").click(function(){

   $(this).next("p").slideToggle("slow")
   .siblings("p:visible").slideUp("slow");
   $(this).toggleClass("active");
   $(this).siblings("h3").removeClass("active");

 });

});

# The first line will add a CSS class active to the first H3 element within the div class=accordion.

# The "active" class will shift the background position of the arrow icon.

# The second line will hide all the p element that is not the first within the div class="accordion".

# When the h3 element is clicked, it will slideToggle the next p and slideUp all its siblings, then toggle the class= active.

Posted by: Tech-Team, Innovative Infosolutions on 07 Dec 2010