jQuery Tutorial

jQuery show method to show the hidden element

In jQuery, show method is used to show the selected elements.

jquery show syntax

$(selector).show(speed of animation, easing, callback function)

In jQuery all the three parameters are optional for show method.

Speed of animation

"fast" - shows the element faster.

"normal" - shows the element in normal.

"slow" - shows the element slower.

milliseconds - shows the element animation as based on specified milliseconds.

easing

"swing" - In middle of the animation is faster but slower in beginning and end of animation.

"linear" - Animation is consistent from beginning to end.

jQuery show method example to show the hidden element

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>jQuery show method</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnShow').click(function () {
                $("div").show();
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btnShow" value="Show"/>
    <div style="height:200px;width:200px;background-color:blue;color:white;display:none;">
        This hidden div will be shown!
    </div>
</body>
</html>

Output:

Hidden div element

Shows div after clicking on show button

shows the div after clicking show button

jQuery show method with callback function

call back function is used to update the hidden div text when shows on clicking of show button.

        $(document).ready(function () {
            $('#btnShow').click(function () {
                $("div").show(function () {
                    $(this).text('call back function!');
                });
            });
        });

jQuery show method with slow animation

jquery show function is used to show the div element with slow animation .

        $(document).ready(function () {
            $('#btnShow').click(function () {
                $("div").show("slow");
            });
        });

jQuery show method with milliseconds animation

jquery show function is used to show the hidden element with animation slower for 15000 milliseconds.

        $(document).ready(function () {
            $('#btnShow').click(function () {
                $("div").show(15000);
            });
        });

jQuery show method with consistent speed

jquery show function is used to show the hidden element with animation slower for 15000 milliseconds with consistent speed.

        $(document).ready(function () {
            $('#btnShow').click(function () {
                $("div").show("normal", "linear");
            });
        });

jQuery show functionality without using show method

css method is also used to show the hidden element.

        $(document).ready(function () {
            $('#btnShow').click(function () {
                $("div").css("display", "block");
            });
        });

« Previous Next »

jQuery Programming Examples