Multiple Div Layer of Expand/Collapse using Java Script and CSS.
Many times, we need to use
multiple level div in our project like if we need to show payment or contact
details. This code will help you short out that type of problem. We can
open/close the div on click on that .in this article I have used the javascript
and css to get this output
For more:- Expand/ Collapse the single div. ,Call JavaScript function on page load in asp.net c# , Close pop up div after specify time using jquery
Design:-
Source Code:-
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="ExpandandCollapse.aspx.cs"
Inherits="ExpandandCollapse" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Multiple
Div Layer of Expand/Collapse</title>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"
type="text/javascript"></script>
<style type="text/css">
body
{
font-size:
.90em;
font-family:
@Times New Roman;
margin:
10px;
padding:
0px;
background-color:
#fbd799;
}
#toggle
{
width:
400px;
display:
block;
}
.heading
{
background-color:
#32808e;
height:
25px;
padding:
5px 5px;
color:
White;
cursor:
pointer;
position:
relative;
border-bottom:
1px solid #fff;
}
.content
{
line-height:
20px;
background-color:
#55b6bb;
min-height:
100px;
padding:
15px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$(".content").hide();
$(".heading").click(function () {
$(this).next(".content").slideToggle(100);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>
Multiple Div Layer of
Expand/Collapse
</h2>
<div id="toggle">
<div class="heading">
Expand/Collapse For Single Div
</div>
<div class="content">
<p>
In this article , we are
expand(show) and collapse(hide) div using java script ,
reason of choosing java
script because it is a client side language so it never
hit on server so Div open
and close very quickly . i have direct paste the source
code for you.<br />
http://www.neerajcodesolutions.com/2014/03/expand-and-collapse-using-java-script.html
</p>
</div>
<div class="heading">
Add social media buttons in web
site or blog</div>
<div class="content">
<p>
Now a days social media is
one the best way to growing the audience and make our
web site or blog to more
popular so for the making of the audience we can add the
social media buttons in our
web site or blog.
<br />
http://www.neerajcodesolutions.com/2015/06/how-to-add-social-media-buttons-in-web.html
</p>
</div>
<div class="heading">
Contact Details</div>
<div class="content">
<p>
Neeraj Srivastava<br />
srinickraj@gmail.com<br />
http://www.neerajcodesolutions.com
</p>
</div>
</div>
</div>
</form>
</body>
</html>
Out-Put:
Multiple Div Layer of Expand/Collapse using Java Script and CSS.
Reviewed by NEERAJ SRIVASTAVA
on
2:58:00 PM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
2:58:00 PM
Rating:
No comments: