jQuery Toggle Method

Last Updated Jul 21, 2015, 12:00:06 PM

jQuery toggle() Method

Before you understand about jquery toggle method try to understand these two jquery methods show and jquery hide

jQuery toggle() method does the both jquery show and jquery hide functions alternatively meaning if the element is initially displayed then it will be hidden, if the element is hidden then it will be shown. Internally toggle() method maintains the state of display property value.


jQuery toggle() has a duration and functions parameters in order to make animation act upon the html element.

The following example illustrates how to use jquery toggle() method


The above example will toggle the paragraph, like hiding and showing it

jquery toggle() method
Try It Now

Other Advanced jQuery Effects you might want to learn
jQuery Effects

jQuery Basic Effects

jQuery Fading Effects

jQuery Sliding Effects

jQuery Custom Effects

Sources and Credits

The content and methods in the tutorial has been referred and updated with jQuery API and The jQuery Foundation

Last Updated Jul 21, 2015, 12:00:06 PM