One of
the common requirement while working on asp.net projects is to show, hide the
contents or controls placed inside Div on CheckBox select/unselect. This can be
done through code in asp.net or by using jQuery. jQuery option is easy and
better, because jQuery is fast as compare to .NET server side code.
In this
article I am going to explain how to show and hide the contents or controls
placed inside DIV on Asp.net CheckBox check and uncheck using jQuery
slideDown() and slideUp() in-built methods.
Source
Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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></title>
<script
src="//code.jquery.com/jquery-1.11.1.min.js"
type="text/javascript"></script>
<script
type="text/javascript">
$(document).ready(function () {
$('#<%=CheckBox1.ClientID %>').change(function () {
if
(this.checked) {
//To
Show Div with Slide Down Effect
$('#dvShowHide').slideDown();
}
else
{
//To
Hide Div with Slide Up Effect uncomment below line
$('#dvShowHide').slideUp();
}
});
});
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<fieldset style="width: 320px;">
<legend><strong>Show Hide
Using Slide Down & Up in Jquery</strong></legend>
<asp:CheckBox ID="CheckBox1" runat="server" Text="Show/Hide" /><br />
<div id="dvShowHide" style="display: none; background-color: #FFDF80; padding:10px;">
<br /><br />
One of the common requirement
while working on asp.net projects is to show, hide the contents or controls
placed inside Div on CheckBox select/unselect. This can be done through code in
asp.net or by using jQuery. jQuery option is easy and better, because jQuery is
fast as compare to .NET server side code. <br /><br />
</div>
</fieldset>
</div>
</form>
</body>
</html>
0 comments:
Post a Comment