jQuery Sliding Effects: slideUp, slideDown, slideToggle Methods

The slideDown() method displays the selected pieces by sliding them down (showing them).

Note that slideDown() effect in jQuery works on components that have been hidden using jQuery techniques and CSS display: none (but not visibility: hidden).

Tip: Look at the slideUp() method to slide up (hide) components.

Syntax for slideDown method in jQuery

$(selector).slideDown(speed,easing,callback)

Example of jQuery slideDown effect in jQuery

Slide all hidden

elements down (show):

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

The slideUp() effect in jQuery moves the selected components up (hidden them).

Tip: Look at the slideDown() method to slide down (display) components.

Syntax for slideUp method in jQuery

$(selector).slideUp(speed,easing,callback)

Example of jQuery slideUp effect 

All

elements should be slid up (hidden):

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

For the selected items, the slideToggle() method toggles between slideUp() and slideDown().

This method verifies the visibility of the specified components. If an element is hidden, slideDown() is called. If an element is visible, slideUp() is called, which generates a toggle effect.

Syntax for slideToggle method in jQuery

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

Example of jQuery slideToggle effect

For all

elements, toggle between slideUp() and slideDown():

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