Introduction:
Some time
while working on web application it is needed to hide or show content on
specific condition. For example add alternate email is optional. It is not
necessary. So in that case we can use Show/ hide functionality on Checkbox. If anybody
wants to add alternate email, select the checkbox, textbox for alternate email will
be visible.
In this article I will explain how to show or hide
the controls/contents placed inside div tag on selecting the checkbox and hide and
clear out the controls e.g. textbox placed in div tag when we unselect the checkbox
in asp.net using jQuery. This can be done using ASP.Net code. But in this
example we will use JQuery for this purpose, because JQuery is light and fast.
Implementation:
Implementation:
Below is the HTML Source of the page having
the controls and jQuery script required for this demonstration.
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="HideJquery.aspx.cs"
Inherits="HideJquery"
%>
<!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 () {
$('#<%=cbAlternateEmail.ClientID%>').bind('click', function
() {
if
($(this).is(":checked"))
{
//Show
the div
$('#dvShowHide').show();
}
else
{
//Hide
the div
$('#dvShowHide').hide();
//Clear
textbox
$('#<%=txtAlternateEmail.ClientID
%>').val('');
//Set
focus in textbox
$('#<%=txtAlternateEmail.ClientID
%>').focus();
}
});
});
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<fieldset style="width: 270px;">
<legend><strong>Show/Hide
Div Content Using Jquery</strong></legend><br />
<asp:CheckBox ID="cbAlternateEmail" runat="server" Text="Add Alternate
Email ?" />
<br />
<div id="dvShowHide" style="display: none;">
Enter Email Id :<asp:TextBox ID="txtAlternateEmail"
runat="server"></asp:TextBox><br />
</div>
</fieldset>
</div>
</form>
</body>
</html>
0 comments:
Post a Comment