For Live Demo: Click here

HTML code snippet for content you want to hide or show:

Important Notes:

• Use class=”expand” for heading
• Use class=”collapse” for content you want to expand or collapse

Sample heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.

HTML code to display “Expand All” and “Collapse All” button:

Important Note:

[Collapse All]
 

Code for CSS:

Note:

• You can change style as you like
• Do not change class name in css if you are not using same class name for HTML code.

Code for JQuery:

$(document).ready(function(){						   
	$(".expand").click(function(){
		$(this).next(".collapse").toggle("slow");
	});
 
      $(".expandAll").click(function(){
            //$(this).next(".accordion").toggle("slow");
            
            if($(this).html()=="[Expand All]")
            {
                  $(".collapse").show("slow");
                  $(this).html("[Collapse All]");
            }
            else
            {
                  $(".collapse").hide("slow");
                  $(this).html("[Expand All]");
            }
});
 
});