Example
Toggle between hide and show for all <p> elements:
$("button").click(function(){
$("p").toggle();
});
Try it Yourself »
Definition and Usage
The toggle() method toggles between hide() and show() for the selected elements.
This method checks the selected elements for visibility. show() is run if an element is hidden. hide() is run if an element is visible - This creates a toggle effect.
Note: Hidden elements will not be displayed at all (no longer affects the layout of the page).
Tip: This method can also be used to toggle between custom functions.
Syntax
$(selector).toggle(speed,easing,callback)
| Parameter | Description |
|---|---|
| speed | Optional. Specifies the speed of the hide/show effect Possible values:
|
| easing | Optional. Specifies the speed of the element in different points of the
animation. Default value is "swing" Possible values:
|
| callback | Optional. A function to be executed after the toggle() method is
completed To learn more about callback, visit our jQuery Callback chapter |
Try it Yourself - Examples
toggle() - Using the speed parameter
How to use the speed parameter to specify the speed of the hide/show effect.
toggle() - Using the callback parameter
How to use the callback parameter when toggling between the hide/show effect.