Description: While working on project I got the requirement to show and hide the contents/controls placed inside div tag. It can be done simply using jquery show and hide methods. But I decided to make it attractive as shown in image above by using slideUp and slideDown methods of jquery.
Implementation: Let’s create a page to demonstrate the concept.
HTML Source
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
function slideUpDownDiv() {
$('#<%=CheckBox1.ClientID%>').click(function () {
if (this.checked) {
$('#dvContent').slideDown();
}
else {
$('#dvContent').slideUp();
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset style="height: 120px; width: 345px;">
<legend>Slide up or down based on checkox check uncheck</legend>
<asp:CheckBox ID="CheckBox1" Checked="true" Text="Slide Up-Down" runat="server"onchange="slideUpDownDiv();" />
<div id="dvContent" style="background-color: #0b6fb7; color: #ffffff; font-weight: bold; padding:5px;">">
This is sample content inside div<br />
This is sample content inside div<br />
This is sample content inside div<br />
This is sample content inside div<br />
</div>
</fieldset>
</div>
</form>
0 comments:
Post a Comment
Note: only a member of this blog may post a comment.