Show, Hide and Animate Controls using JQuery

In this article, I going to show you with an example on how to Show, Hide and Animate HTML elements using JQuery. For this purpose I’ll use JQuery “show()”, “hide()” and “animate()” method. Using these methods, we can organize and display webpages more professionally.

For my demo, I am using an ASP.Net “Panel” control, which will act as a container to an HTML DIV element. Inside the DIV element, we will add couple buttons.

Try it your self

We will keep the DIV element “hidden” (using CSS display:none) when the page loads, only exposing the Panel and a button. The button’s click event will show the DIV (display:block) and animate the Panel by changing its width and height. The speed at which it will animate (or expand) is to 500 miliseconds.

Add JQuery CDN inside the script tag in the Head section of the Web page.

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
The Markup
<!DOCTYPE html>
<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;
            margin:0px;
            padding:10px;
            font-family:Arial,Helvetica;
            font-size:12px;
        }
        #panAnim {
            font:inherit; 
            font-size:12px; 
            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>
    <form id="form1" runat="server">
    <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>
    </form>
</body>

The JQuery Script
<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>

Demo

Tweet this article Facebook Google+
comments powered by Disqus

Join our Google Plus Community and be a part of a discussion!