jQuery Effect toggle() Method

Quiz

The toggle() method in jQuery is used to toggle between hiding and showing elements with a sliding motion, creating a toggle effect.

When we use this method on a selected set of elements, toggle() toggles the visibility of those elements. If the elements are currently visible, toggle() hides them with a sliding motion. If the elements are currently hidden, toggle() shows them with a sliding motion. This creates a smooth transition effect, making the display toggle appear more visually appealing.

Syntax

Following is the syntax of toggle() method in jQuery −

$(selector).toggle(speed,easing,callback)

Parameters

This method accepts the following optional parameters −

speed (optional): A string or number determining how long the animation will run. Default value is 400 milliseconds. Possible values are: milliseconds, slow, fast.
easing (optional): A string indicating which easing function to use for the transition. Default value is "swing". Possible values are: swing, linear.
callback (optional): A function to be executed once the animation is complete.

Example 1

This program creates a button that toggles the visibility of a <div> element when clicked −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#toggleButton').click(function() {
                $('#toggleDiv').toggle();
            });
        });
    </script>
</head>
<body>
    <button id="toggleButton">Toggle</button>
    <div id="toggleDiv" style="background-color: #40a944; width: 200px; height: 200px;"></div>
</body>
</html>

Click on the button on to see the toggle effect applied on the <div> element.

Example 2

In this example, we are using the jQuery's toggle() method with a specified "speed" parameter −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#toggleButton').click(function() {
                $('#toggleDiv').toggle(2000);
            });
        });
    </script>
</head>
<body>
    <button id="toggleButton">Toggle</button>
    <div id="toggleDiv" style="background-color: #40a944; width: 200px; height: 200px;"></div>
</body>
</html>

When we click on the button, the toggle effect will performed on the <div> element over the speed of 2 seconds.

Example 3

The following example uses the jQuery's toggle() method with a callback function −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#toggleButton').click(function() {
                $('#toggleDiv').toggle('slow', function() {
                    if ($(this).is(':visible')) {
                        $('#toggleMessage').text('Div is now visible');
                    } else {
                        $('#toggleMessage').text('Div is now hidden');
                    }
                });
            });
        });
    </script>
</head>
<body>
    <button id="toggleButton">Toggle</button>
    <div id="toggleDiv" style="background-color: #40a944; width: 200px; height: 200px;"></div>
    <p id="toggleMessage"></p>
</body>
</html>

After clicking the button, when the div element is hidden, it shows "Div is now hidden". When the div element is visible, it shows "Div is now visible".

jquery_ref_effects.htm

Print Page