jQuery slideToggle: Explained With an Example

The slideToggle method of jQuery

The slideToggle() method is used to toggle between the slideDown() and slideUp() methods. If an element is slid down, the jQuery slideToggle method will slide it up and vice versa.

See example of slideToggle

Syntax of jQuery slideToggle method

Following is the syntax of the slideToggle method:

$(selector).slideToggle (speed,callback);

Where:

  • selector = An element to toggle, that can be a paragraph, div etc.
  • Speed = The speed in milliseconds, “fast” or “slow”.
  • Callback = An optional argument, which is a function, that will be executed after sliding completes in either direction (upwards or downwards)

For example:

$(“#slider”).slideToggle(“slow”);

Example of slideToggle() method

Following example shows how to use the jQuery slideToggle method. A paragraph of text is already shown as example page loads.

As you click on the link to toggle, the paragraph will slide up and upon clicking it again it will slideDown by using the slideToggle method.

See demo online by clicking the link or image:

jQuery slideToggle

Experience this example online