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.
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.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 Fade In Effect uncomment below line
$('#dvShowHide').fadeIn('slow');
}
else
{
//To
Show Div with Fade Out Effect uncomment below line
$('#dvShowHide').fadeOut('slow');
}
});
});
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<fieldset style="width: 320px;">
<legend><strong>Show Hide
Using Fade in & Out 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