Description

The .toggle() method toggles between hide() and show() for the selected elements.

This method is also used to toggle between custom functions.

---

Toggle Between Hide() and Show()

Checks each element for visibility. show() is run if an element is hidden. hide() is run if an element is visible - This creates a toggle effect

---

This method has the form:

.toggle(speed,callback)

Parameter	Description
speed	(optional) Specifies the speed of the hide/show effect (default = "0"). Possible values: milliseconds (like 1500) "slow" "normal" "fast"
callback	(optional) A function to be executed after the toggle() method is completed

Return Value

This form returns a jQuery object.

---

This method has the alternate form:

.toggle(speed,easing,callback)

Parameter	Description
speed	(optional) Specifies the speed of the hide/show effect (default = "0"). Possible values: milliseconds (like 1500) "slow" "normal" "fast"
easing	(optional) A string indicating which easing function to use for the transition.
callback	(optional) A function to be executed after the toggle() method is completed

Return Value

This form returns a jQuery object.

---

Show or Hide Elements

Specifies whether to ONLY show or ONLY hide ALL matched elements

This method has the alternate form:

.toggle(switch)

Parameter	Description
switch	(required) A Boolean value that specifies if toggle() should only show or only hide all selected elements. true - show elements false - hide elements

Return Value

This form returns a jQuery object.

Examples

Toggle between hide and show for a p element:

$("button").click(function(){
  $("p").toggle();
});