Easy Tutorial
❮ Event Mouseout Event Off ❯

jQuery toggle() Method

jQuery Effects Methods

Example

Toggle between hiding and showing all <p> elements:

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

Definition and Usage

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

This method checks the selected elements for visibility. If an element is hidden, show() is run. If an element is visible, hide() is run - 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 be used to toggle between custom functions.


Syntax

Parameter Description
speed Optional. Specifies the speed of the hide/show effect. Possible values: milliseconds<br> "slow"<br> "fast"
easing Optional. Specifies the speed of the element at different points of the animation. Default value is "swing". Possible values: "swing" - moves slower at the beginning/end, faster in the middle<br> "linear" - moves at a constant speed. Tip: More easing functions are available with the use of plug-ins.
callback Optional. A function to be executed after the toggle() method is completed. To learn more about the callback, visit our jQuery Callback chapter.

More Examples

toggle() - Using speed parameter

toggle() - Using callback parameter


jQuery Effects Methods

❮ Event Mouseout Event Off ❯