Introduction:
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 show(), hide(), fadeIn(), fadeOut , slideDown() and slideUp() in-built methods.
 |
| SideUp SlideDown Effect |
In previous articles i explained jQuery to calculate Running Total of Textbox values and show in Label and jQuery to Check Uncheck all items in CheckBoxList on click of Select All CheckBox and jQuery to Enable,Disable,Show and Hide asp.net controls based on DropDownList selected value and jQuery to Show/Hide controls placed in Div based on RadioButtonList selected value and jQuery to Show Hide controls placed inside Div based on Checkbox check uncheck
Description: 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 . Here in this article example you will learn how
to perform this task easily using jQuery with different in-built functions. In above image you can see the SlideUp and Slide Down effect . In the image below FadeIn and FadeOut effect has been implemented.
 |
| FadeIn FadeOut Effect |
Implementation: Let's create a simple website page
(default.aspx) to demonstrate the concept. Below is the HTML source and the
required jQuery script.
<%@ 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 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();
//To
Show Div normally uncomment below line
//$('#dvShowHide').show();
//To
Show Div with Fade In Effect uncomment below line
//$('#dvShowHide').fadeIn('slow');
}
else
{
//To
Hide Div with Slide Up Effect uncomment below line
$('#dvShowHide').slideUp();
//To
Hide Div normally uncomment below line
//$('#dvShowHide').hide();
//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: 300px;">
<legend></legend>
<asp:CheckBox ID="CheckBox1" runat="server" Text="Show/Hide" /><br />
<div
id="dvShowHide"
style="display: none; background-color: #FFDF80; padding:10px;">
This Content is inside div<br />
This Content is inside div<br />
This Content is inside div<br />
This Content is inside div<br />
This Content is inside div<br />
This Content is inside div
</div>
</fieldset>
</div>
</form>
</body>
</html>Now over to you:
" I hope you have learned how to use jQuery show hide fadeIn fadeOut slideUp slideDown functions to show hide div content with this example and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates."
If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..