jQuery Effect - slideToggle() Method

jQuery Effect Reference Manual

Example

Toggle the <p> element between visible and hidden states using sliding effects:

$(".btn1").click(function(){
  $("p").slideToggle();
});

Try it yourself

Definition and Usage

The slideToggle() method switches the visibility state of the element by using a sliding effect (height change).

If the selected element is visible, hide these elements; if the selected element is hidden, display these elements.

Syntax

$().slideToggle(speed,callback)
Parameter Description
speed

Optional. Specify the speed of the element from hidden to visible (or vice versa). The default is "normal".

Possible values:

  • Milliseconds (e.g., 1500)
  • "slow"
  • "normal"
  • "fast"

When setting the speed, the element will gradually change its height during the switch process (which will create a sliding effect).
callback

Optional. The function to be executed after the toggle function is executed.

For more information about callback, please visit our jQuery Callback chapter.

You cannot set this parameter unless speed is set.

Tips and Comments

Tip:If the element is already hidden, the effect does not produce any change unless a callback function is specified.

More examples

Use the speed parameter
Use the speed parameter to switch the display and hide of elements sliding up and down.

jQuery Effect Reference Manual