X
HOME HTML5 CSS3 JAVASCRIPT SQL PHP5 JQUERY ANGULAR BOOTSTRAP3 XML MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

jQuery toggle() Method

jQuery Effect Methods 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



Examples

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 jQuery Effect Methods


Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook