Skip to content
Related Articles

Related Articles

Improve Article

jQuery | toggle() Method

  • Last Updated : 21 Feb, 2019

The toggle() method is used to check the visibility of selected elements to toggle between hide() and show() for the selected elements.

  • show() is run when the element is hidden.
  • hide() is run when the element is visible.

Syntax:

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

Parameters: It has three optional parameters:

  • speed: It is used to specify the speed of the toggle effect. It can be in terms of milliseconds, slow or fast.
  • easing: It is used to specify the speed of the element at the different points of animation.
  • callback: The function to be immediately called after the toggle effect.

Below is the example to show the toggle() method:






<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $("#gfg").toggle();
            });
        });
    </script>
    <style>
        #gfg {
            color: green;
            border: 5px solid black;
            width: 200px;
            text-align: center;
        }
    </style>
    </style>
</head>
  
<body>
  
    <div id="gfg">GeeksforGeeks</div>
  
    <button>Click to hide() and show() the above div</button>
  
</body>
  
</html>

Output:
Before clicking on the button:

After clicking on the button:

After clicking on the button again:




My Personal Notes arrow_drop_up
Recommended Articles
Page :