Please disable your adblock and script blockers to view this page
 

jQuery: Slide up down div content based on asp.net checkbox check uncheck

Introduction: In this article I am going to share how to slide up or slide down the contents placed inside div tag based on checkbox selection using jquery slideUp and slideDown functions.
slide up down div content based on asp.net checkbox check uncheck using jquery
In previous articles i explained how to Validate asp.net CheckBoxList using jQuery and 

Description: While working on project I got the requirement to show and hide the contents/controls placed inside div tag. It can be done simply using jquery show and hide methods. But I decided to make it attractive as shown in image above by using slideUp and slideDown methods of jquery.

Implementation: Let’s create a page to demonstrate the concept.

HTML Source 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
        function slideUpDownDiv() {
            $('#<%=CheckBox1.ClientID%>').click(function () {
                if (this.checked) {
                    $('#dvContent').slideDown();
                }
                else {
                    $('#dvContent').slideUp();
                }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <fieldset style="height: 120px; width: 345px;">
                <legend>Slide up or down based on checkox check uncheck</legend>
                <asp:CheckBox ID="CheckBox1" Checked="true" Text="Slide Up-Down" runat="server" onchange="slideUpDownDiv();" />
                <div id="dvContent" style="background-color: #0b6fb7; color: #ffffff; font-weight: bold; padding:5px;">">
                    This is sample content inside div<br />
                    This is sample content inside div<br />
                    This is sample content inside div<br />
                    This is sample content inside div<br />
                </div>
            </fieldset>
        </div>

    </form>
Now over to you:
"A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linkedin 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