Tutorials References Menu

jQuery toggle() Method

❮ jQuery Effect Methods

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:

  • milliseconds
  • "slow"
  • "fast"
easing Optional. Specifies the speed of the element in different points of the animation. Default value is "swing"

Possible values:

  • "swing" - moves slower at the beginning/end, but faster in the middle
  • "linear" - moves in a constant speed
Tip: More easing functions are available in external plugins
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.


❮ jQuery Effect Methods