Please disable your adblock and script blockers to view this page
 

Show hide div content on Asp.net checkbox check uncheck using jQuery show hide fadeIn fadeOut slideUp slideDown functions

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.
jQuery show hide fadeIn fadeOut slideUp slideDown functions to show hide div content on Asp.net checkbox check uncheck
SideUp SlideDown Effect
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.
jQuery show hide fadeIn fadeOut slideUp slideDown functions to show hide div content on Asp.net checkbox check uncheck
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."
Previous
Next Post »

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.. ConversionConversion EmoticonEmoticon