jQuery Tutorial

jQuery toggle method to hide and show element

jQuery toggle method is used to toggle between show and hide the selected elements.

jquery toggle syntax

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

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

Speed of animation

"fast" - hides or shows the element faster.

"normal" - hides or shows the element in normal.

"slow" - hides or shows the element slower.

milliseconds - hides or 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 toggle with callback function example

Updates the div element text when shows the div element on clicking of toggle button.

<!DOCTYPE html>

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

Output:

Hides div after clicking on toggle button

toggle hides the div after click toggle button

Shows div after clicking on toggle button

toggle shows the div after click toggle button

jQuery toggle method

jquery toggle function is used to show the element if already hidden, otherwise hides the element if already displayed.

        $(document).ready(function () {
            $('#btnToggle').click(function () {
                $("div").toggle();
            });
        });

jQuery toggle method with slow animation

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

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

Hides div slower after clicking on toggle button

jQuery toggle method with milliseconds animation

jquery toggle function is used to show or hide the element with animation slower for 15000 milliseconds.

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

jQuery toggle method with consistent speed

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

        $(document).ready(function () {
            $('#btnToggle').click(function () {
                $("div").toggle(15000, "linear");
            });
        });

« Previous Next »

jQuery Programming Examples