Jquery Expand Collapse (Expand all / collapse all)

There are some good tutorials available for expand collapse which are created using jquery toggle. Last week i was looking for one tutorial where i can not only expand collapse individual boxes but i want a button to expand all / collapse all feature.

Html Part

<div class="wrapper">
<div class="expand_top"><div class="expand_all"></div></div>
<div class="expand_wrapper">
	<h2 class="expand_heading"><a href="#">Wordpress Theme Development</a></h2>
	
	<div class="toggle_container">
		<div class="box">
			<h3>Wordpress Theme Development</h3>
			
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
		</div>
	</div>
	
	<h2 class="expand_heading"><a href="#">Magento E-commerce</a></h2>

	<div class="toggle_container">
		<div class="box">
			<h3>Need Shopping website?</h3>
		
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
		<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
		</div>

	</div>
</div>
</div>

CSS PART

h2.expand_heading {
	padding: 0 0 0 20px;
	margin: 0 0 5px 0;
	background: url(expand-collapse.png) no-repeat;
	height: 38px;
	line-height: 38px;
	width: 400px;
	font-size: 2em;
	font-weight: normal;
	float: left;
}
.expand_all
{
cursor:default;
}
h2.expand_heading a {
	color: #fff;
	text-decoration: none;
	display: block;
}
h2.expand_heading a:hover {
	color: #ccc;
}

h2.active {background-position: left bottom;}
.toggle_container {
	margin: 0 0 5px;
	padding: 0;
	border-top: 1px solid #d6d6d6;
	background: #ffffff;
	overflow: hidden;
	font-size: 1.2em;
	width: 400px;
	clear: both;
}
.toggle_container .box {
	padding: 20px;
}
.toggle_container .box p {
	padding: 5px 0;
	margin: 5px 0;
}
.toggle_container h3 {
	font: 2.0em normal Georgia, "Times New Roman", Times, serif;
	margin: 0 0 5px;
	padding: 0 0 5px 0;
	color:#000000;
	border-bottom: 1px dotted #ccc;
}
.toggle_container img {
	float: left;
	margin: 10px 15px 15px 0;
	padding: 5px;
	background: #ddd;
	border: 1px solid #ccc;
}
.expand_all
{
width:116px;
height:29px;
background:url(extra-buttons.png) no-repeat top left;
float:right;
cursor: pointer; 
}
.expanded
{
background-position:bottom left;
}

Jquery Part

<script type="text/javascript">
$(document).ready(function(){
	$(".toggle_container").hide();
	$("h2.expand_heading").toggle(function(){
		$(this).addClass("active"); 
		}, function () {
		$(this).removeClass("active");
	});
	$("h2.expand_heading").click(function(){
		$(this).next(".toggle_container").slideToggle("slow");
	});
	$(".expand_all").toggle(function(){
		$(this).addClass("expanded"); 
		}, function () {
		$(this).removeClass("expanded");
	});
	$(".expand_all").click(function(){
		$(".toggle_container").slideToggle("slow");
	});
});
</script>

Jquery Expand Collapse Simple Example Demo & Download

[btn_details href=”https://snilesh.com/blog/demo/expand-collapse/”]Demo[/btn_details]

[btn_details href=”https://snilesh.com/blog/demo/expand-collapse.zip”]Download[/btn_details]

Other Resources Else Where

• Expandable Collapsible Toggle Pane