jQuery | toggle() Method
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:
