Description:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery.min.1.3.2.js" type="text/javascript"></script>
css:
<style type="text/css">
.layer1 {
margin: 0;
padding: 0;
width: 500px;
}
.heading {
margin: 1px;
color: #fff;
padding: 3px 10px;
cursor: pointer;
position: relative;
background-color:#c30;
}
.content {
padding: 5px 10px;
background-color:#fafafa;
}
p { padding: 5px 0; }</style>
<script type="text/javascript">
jQuery(document).ready(function () {
// jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function () {
jQuery(this).next(".content").toggle();
});
});
</script>
</head>
<body>
<div class="layer1">
<p class="heading">Header-1 </p>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
<p class="heading">Header-2</p>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
<p class="heading">Header-3</p>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</body>
</html>
No comments:
Post a Comment