jQuery Sliding Effects

There are three useful methods in jQuery to slide selected elements up and down. These methods are slideDown(), slideUp() and slideToggle(). In this guide, we will discuss these three methods briefly as I have covered each of them in detail in separate tutorials, I will also provide links to those tutorials here in this article.

jQuery sliding methods

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

1. jQuery slideDown()

jQuery slideDown() method is used to make the selected element appear gradually on an html page with the slide down effect.

For example, in this code we have assigned an id “para” to a paragraph and we have initially set the display of that paragraph to none. On the click on h2 element, the paragraph appear on the screen with a slide down effect.

To check out the complete example and more details about slideDown() method refer this guide: jQuery slideDown()

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

2. jQuery slideUp()

jQuery slideUp() method is used to gradually disappear selected html element with a slide up effect.

In the following piece of jQuery code we are hiding a paragraph with id “para” on the click of h2 element. The paragraph gets hidden with a slide up effect.

To check out the complete example and more details about slideUp() method refer this guide: jQuery slideUp()

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

3. jQuery slideToggle()

jQuery slideToggle() method toggles between slideDown() and slideUp() effects. If the selected html elements are slid down then slideToggle() method will slide them up and if the selected html elements are slid up then this method will slide them down.

For example, In the following code, we are sliding up and down a paragraph on the click of h2 element.

To check out the complete example and more details about slideToggle() method refer this guide: jQuery slideToggle()

$(document).ready(function(){
  $("h2").click(function(){
    $("p").slideToggle();
  });
});