Show Hide and Animate DIV using jQuery and CSS

Last updated: 15th August 2024

Sharing a simple jQuery example here that explains how to show, hide and animate HTML elements using jQuery and CSS. The methods that I am going to use for this purpose are .show(), .hide() and .animate(), along with style using CSS.

➡️ jQuery fading methods with example

First, let's see the methods that I am using in this exmaple.

1) jQuery .animate() method

Syntax

selector.animate({style}, duration, easing, complete)

The animate() method takes four parameters.

animate: It specifies a CSS property. This is required.
duration: It specifies the duration an animation will run. The default value is 400. The value can also be "fast" or "slow" This is optional.
easing: It specifies the speed of the element in different points of the animation. There are two options: swing and linear. The default is swing. This is optional.
complete: A callback function to be executed after the animation completes. This is optional.

➡️ Learn more about animate() method.

2) jQuery .hide() method

The hide() method hides the matched (selected) elements.

Syntax

selector.hide(duration, complete)

duration: It specifies the speed or duration of the hide effect. The value is in "milliseconds" (a number). It can also be "slow" or "fast". This is optional.
complete: A callback function to be executed after the hide method is completed (or the element is hidden). This is optional.

➡️ Learn more about hide() method.

3) jQuery .show() method

The show() method shows the hidden (selected) elements.

Syntax

selector.show(duration, complete)

duration: It specifies the speed or duration of the show effect. The default value is 400 "milliseconds". The value can also be "slow" or "fast". This is optional.
complete: A callback function to be executed after the show method is completed (or the element is visible). This is optional.

➡️ Learn more about show() method.

Now let's get back to the example.

We can now hide a group of elements on page load and allow users to show or hide the elements according to their necessity.

For this example, I am using two <div> elements that will serve as containers. In-addition, I am writing the jQuery methods on these two elements.

I also have two buttons inside each <div> element. The first button’s click event will animatedly increase and decrease the width and height of the first (parent) <div>. Similarly, the second button’s click event will show and hide another <div> (child) element. The animation time is set as 500 milliseconds.

I combined all the three jQuery methods in this single example. You can however, break these into multiple situations in your application.

Ok! Let's do it.

First, we'll add the jQuery CDN inside the <head> tag of the web page. The CDN (a js file) provides all the methods that we need to do what I've just explained above.

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>

The Markup

<!DOCTYPE html>
<html>
<head>
    <title>Show, Hide and Animate Controls using jQuery and CSS</title>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <style>
        #divAnim {
            font:15px Verdana; 
            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;
        }
        #divAnim label {
            width:100%; 
            color:#009872; 
            font-size:14px; 
            padding:10px; 
        }
        #divAnim 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;
        }
        #divAnim div {
            display:none; 
            padding:20px 10px;
        }
        #divAnim 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 id="divAnim">
        <input type="button" id="btAnimate" value="Click it" />
        <div id="divC">
            <ul>
                <li><label>jQuery, 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>
    </div>
</body>

The Script

<script>
    $(document).ready(function () {
        $('#btAnimate').click(function () {
            // Animate the div element. A duration is set to 500 milliseconds.
            $("#divAnim").animate({ width: '500px', height: '120px' }, 500);
            $('#divC').show();          // Also show the div element.
        });

        // REVERSE ANIMATE.
        $('#btHide').click(function () {
            $("#divAnim").animate({ width: '80px', height: '27px' }, 500);
            $('#divC').hide('slow');          // HIDE THE DIV.
        });
    });
</script>
</html>

Try it

Also, try these new methods.

Show Hide and Animate Controls using jQuery .animate() Method and CSS

1) jQuery .animate() method

2) jQuery .hide() method

3) jQuery .show() method