Toggle between hide and show for all <p> elements:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>// w w w. j av a2 s . c o m <script> $(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); }); </script> </head> <body> <p>This is a paragraph.</p> <button>Toggle between hide() and show()</button> </body> </html>
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.
Hidden elements will not be displayed at all and they no longer affect the layout of the page.
This method can be used to toggle between custom functions.
$(selector).toggle(speed,easing,callback)
| Parameter | Optional | Description |
|---|---|---|
| speed | Optional. | speed of the hide/show effect Possible values: milliseconds "slow" "fast" |
| easing | Optional. | speed of the element in different points of the animation. Default value is "swing" Possible values: "swing" - moves slower at the beginning/end, faster in the middle "linear" - moves in a constant speed |
| callback | Optional. | A function to be executed after the toggle() method is completed |