encodedna - jquery

Show, Hide and Animate Controls using JQuery.

February 18th, 2013
jquery asp.net
A simple but useful process of showing and hiding of a Server control or an HTML tag is what we are going discuss in this article. Simple, if it is done using JQuery and useful since it allows us to organize and display the website in a professional manner.

Here, we will see how an Asp.Net Panel control can be animated and an HTML Div tag can be shown and hidden simultaneously using JQuery.

Try it your self

To animate the “Panel” control, we will use the “animate()” function by changing the Panels “Width and Height” at a speed on “500” milliseconds.

The HTML Div inside the “Panel” control is kept hidden by setting the “display” property as “none”. The Div tag will be shown and hidden with the “click” of two buttons.

Add the JQuery library (Google) file inside the “Script” tag in the “Head” section of the Web page.

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
Design
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<html>
<head>
    <title>Show, Hide and Animate Controls using JQuery</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <style>
        body { background:#FFF; padding:10px; font-family:Arial,Helvetica; font-size:12px }
        
        #panAnim { font:inherit; background-color:#FFF; position:relative; width:80px; 
            height:27px; padding:5px; border:solid 1px #CCF; border-radius:2px; -moz-border-radius:2px; 
            -webkit-border-radius:2px }
        #panAnim label { width:100%; color:#009872; font-size:14px; padding:10px }
        #panAnim input { padding:3px 2px; border:solid 1px #3079ED; border-radius:2px; 
            -moz-border-radius:2px; -webkit-border-radius:2px; background:#6D9BF1; color:#FFF; cursor:pointer }
        #panAnim div {display:none; padding:20px 10px}
        #panAnim li { margin:0 2px 0 0; display:inline; font-size:0.7em; font-style:normal;
	        padding:2px 0 2px 2px; vertical-align:middle}
    </style>
</head>
<body>
    <div>
        <asp:Panel ID="panAnim" runat="server">
            <input type="button" id="btAnimate" value="Click it" />
            <div id="divC">
                <ul><li><label>JQuery,</label></li><li><label>Write less, do more</label></li></ul>
                <ul>
                    <li><label>Some useful contents inside this division.</label></li>
                    <li style="float:right"><input type="button" id="btHide" value="Hide it" /></li>
                </ul>
            </div>
        </asp:Panel>
    </div>
</body>
<script>
    $('#btAnimate').click(function() {
        // ANIMATE THE PANEL CONTROL AT THE SPEED OF 500 MILISECONDS.
        $("#panAnim").animate({ width: '500px', height: '120px' }, 500);
        $('#divC').show();          // ALSO SHOW THE DIV.
    });
    // REVERSE ANIMATE.
    $('#btHide').click(function() {
        $("#panAnim").animate({ width: '80px', height: '27px' }, 500);
        $('#divC').hide();          // HIDE THE DIV.
    });    
</script>
</html>

For any queries, please send us an Email.

jquery asp.net