HI WELCOME TO KANSIRIS

JQUERY: SLIDE UP DOWN DIV CONTENT BASED ON ASP.NET CHECKBOX CHECK UNCHECK

Leave a Comment
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="height120pxwidth345px;">
                <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: #0b6fb7color#fffffffont-weightbold; 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>

0 comments:

Post a Comment

Note: only a member of this blog may post a comment.