Hi every one, in my previous article Expand collapse div using jQuery - Part -1. I had told you about toggle div. In this example, a simple solution of toggle multiple div using jQuery, clicking on div heading will expand/collapse the select content.
Here's an example.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>How to expand collapse multiple div layer using </title>
<script src="http://code.jquery.com/jquery-1.4.3.min.js" type="text/javascript"></script>
<style type="text/css">
body
{
background: #FFF;
font-size: .90em;
font-family: "Helvetica Neue" , "Lucida Grande" , "Segoe UI" , Arial, Helvetica, Verdana, sans-serif;
margin: 10px;
padding: 0px;
}
#toggle
{
width: 400px;
display: block;
}
.heading
{
background-color: #666;
height: 25px;
padding: 5px 5px;
color: #fff;
cursor: pointer;
position: relative;
border-bottom:1px solid #fff;
}
.content
{
line-height: 20px;
background-color: #eee;
min-height: 100px;
padding: 15px;
}
</style>
<script language="javascript">
$(document).ready(function () {
$(".content").hide();
$(".heading").click(function () {
$(this).next(".content").slideToggle(100);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>
How to expand collapse multiple div layer using </h2>
<div id="toggle">
<div class="heading">
Heading 1</div>
<div class="content">
<p>
content 1
</p>
</div>
<div class="heading">
Heading 2</div>
<div class="content">
<p>
content 2
</p>
</div>
<div class="heading">
Heading 3</div>
<div class="content">
<p>
Author:Aamir Hasan<br />
Date: November 07, 2010<br />
www.aspxtutorial.com
</p>
</div>
</div>
</form>
</body>
</html>
Output
Download
Mutil Div toggle.zip (1.33 kb)
Live demo