jQuery .toggle() method displays or hide the matched elements

Syntax and Description


.toggle([duration][, callback]) 
.toggle(showOrHide)

displays or hide the matched elements.

  • duration (optional)A string or number determining how long the animation will run
  • callback (optional)A function to call once the animation is complete
  • showOrHideA Boolean indicating whether to show or hide the elements

Its return value is the jQuery object, for chaining purposes.

With no parameters, the .toggle() method simply toggles the visibility of elements:

$('.target').toggle();

Durations are given in milliseconds; higher values indicate slower animations. The 'fast' and 'slow' strings can be supplied to indicate durations of 200 and 600 milliseconds, respectively.

If supplied, the callback is fired once the animation is complete. If Boolean parameter is true, then the matched elements are shown; if false, the elements are hidden. In essence, the following statement

$('#foo').toggle(showOrHide);

is equivalent to:


if (showOrHide) {
 $('#foo').show();
}//  w w  w . j av a 2s. c om
else {
 $('#foo').hide();
}




















Home »
  jQuery »
    jQuery Tutorial »




Basics
Selector
DOM
Event
Effect
Utilities