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:
