jQuery Tutorial

jQuery Sliding Effects: slideUp, slideDown, slideToggle Methods

jQuery slideDown() Method

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();
});

jQuery slideUp() Method

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();
});

jQuery slideToggle() Method

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();
});
Did you find this article helpful?