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.
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");
});
});
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");
});
});
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");
});
});
Here are all jQuery effects references, see all jQuery effects references.