.NET Articles,jQuery demo, asp.net with jQuery, online tutorial,Jquery, SilverLight, Javascript, asp.net,JSON, MVC,.NET Articles,demo, Web Services, .NET articles, Sharepoint 2010, visual studio 2010,Aamir Hasan,IT
wwwSW
Posted by
Aamir Hasan
on
Saturday, November 6, 2010
Total Views:
Hi every one, i have added a simple toggle event method on div layer using jQuery. Clicking on Div heading expand/collapse a div. It is working perfectly.
Here's an example
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>How to expand collapse div layer using jQuery</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: Verdana;
margin: 10px;
padding: 0px;
}
#toggle
{
width: 400px;
display: block;
}
#heading
{
background-color: #666;
height: 25px;
padding: 5px 5px;
color: #fff;
cursor: pointer;
position: relative;
}
#content
{
line-height: 20px;
background-color: #eee;
min-height: 200px;
padding: 15px;
}
</style>
<script language="javascript">
$(document).ready(function () {
$("#heading").click(function () {
$("#content").slideToggle(100);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>
How to expand collapse div layer using jQuery</h2>
<div id="toggle">
<div id="heading">
Heading</div>
<div id="content" style="display: none;">
<p>
Author:Aamir Hasan<br />
Date: November 07, 2010<br />
www.aspxtutorial.com
</p>
</div>
</div>
</form>
</body>
</html>
Output
Download
ToggleDiv.zip (1.22 kb)
Live demo
6ad3b3ed-3551-4387-8696-ac67724c57f8|0|.0
Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5