Pages

Tuesday 9 April 2013

jQuery Show DIV, Hide DIV, Toggle DIV Content Example

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Show Hide Div Content</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function() {
$('.showhide').click(function() {
$(".slidediv").slideToggle();
});
});
</script>
<style type="text/css">
.slidediv{
width: 30%;
padding:20px;
background:#EB5E00;
color:#fff;
margin-top:10px;
border-bottom:5px solid #FFF;
display:none;
}
</style>
</head>
<body>
<a href="#" class="showhide">Show/hide</a>
<div class="slidediv">
Welcome to Aspdotnet-Suresh.com
Welcome to Aspdotnet-Suresh.com
Welcome to Aspdotnet-Suresh.com
Welcome to Aspdotnet-Suresh.com
</div>
</body>
</html>

No comments:

Post a Comment