jQuery slideUp, slideDown and slideToggle method

jQuery provides three useful sliding effect methods - slideUp, slideDown and slideToggle method. We can use these methods to hide and show an HTML element with sliding effect.

1. slideDown()
2. slideUp()
3. slideToggle()

jQuery slideDown() Method

jQuery slideDown() method is used to show the hidden HTML element where it looks like the content is getting shown by sliding down.

Syntax

$(selector).slideDown();        // This syntax does not accept any arguments.

$(selector).slideDown( [duration], [callback]);

Parameters

• duration default: 400 Accept string or number that determining how long animation will run. For example predefined duration ("slow", "normal", "fast"), or number of milliseconds to run the animation (3000, 1000).
• callback Optional. A function to call once the animation is complete.

Example

$(document).ready(function() {
  $("#click").click(function(){
    $("#slide").slideDown("slow");
  });
});

 

Run it...   »

jQuery slideUp() Method

jQuery slideUp() method is used to hide the HTML element where it looks like the content is getting hidden by sliding up.

Syntax

$(selector).slideUp();        // This syntax does not accept any arguments.

$(selector).slideUp( [duration], [callback]);

Parameters

• duration default: 400 Accept string or number that determining how long animation will run. For example predefined duration ("slow", "normal", "fast"), or number of milliseconds to run the animation (3000, 1000).
• callback Optional. A function to call once the animation is complete.

Example

$(document).ready(function() {
  $("#click").click(function(){
    $("#slide").slideUp("slow");
  });
});

 

Run it...   »

jQuery slideToggle() Method

jQuery slideToggle() method is used to toggle the HTML element with sliding hide and show effects. If the element is hidden then it will show the element like slideDown() method. And if element is visible then it will hide the element like slideUp() method.

Syntax

$(selector).slideToggle();        // This syntax does not accept any arguments.

$(selector).slideToggle( [duration], [callback]);

Parameters

• duration default: 400 Accept string or number that determining how long animation will run. For example predefined duration ("slow", "normal", "fast"), or number of milliseconds to run the animation (3000, 1000).
• callback Optional. A function to call once the animation is complete.

Example

$(document).ready(function() {
  $("#click").click(function(){
    $("#slide").slideToggle("slow");
  });
});