The sliding phenomenon allows you to slide up or slide down DOM elements. Sometimes, a panel is attached with elements that provide additional information. These panels are slid up/down depending on the requirement.

JQuery supports three sliding methods that are slideUp(), slideDown(), and slideToggle(). The slideUp() or slideDown() methods slide the elements in upward or downward directions respectively. Alternatively, the slideToggle() method determines whether the element is in the slideUp() state or in slideDown(). For instance, if the element is in the slideUp() state, then slideToggle() will slide the element downwards and vice versa.

This article demonstrates the jQuery sliding methods in detail and serves the following learning outcomes.

  • working of slideUp(), slideDown(), and slideToggle() methods
  • demonstration of jQuery sliding methods using examples

How jQuery sliding methods work

This section provides the working mechanism of jQuery sliding methods by elaborating the syntaxes. Additionally, an example is provided that refers to each jQuery method separately. Let’s explore jQuery sliding methods one by one.

How to use the slideUp() method

This method slides the element upward using jQuery slideUp().

Syntax

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

In the above syntax,

  • the selector can be any element or may refer to the class/id of an element
  • the speed parameter decides how fast/slow the element will be slid up and the values of speed can be slow, fast, or milliseconds (numeric value) 
  • the callback is optional and is used to get some output after the sliding is completed

Example

The following lines of code practice the jQuery slideUp() method.

<script>

$(document).ready(function(){

  $(“.prim”).click(function(){

    $(“.sec”).slideUp(“fast”);

  });

});

</script>

The code is explained here

  • the “prim” class refers to the main panel(on which the sliding depends)
  • the “sec” class is used for the secondary panel(which will be slid up)
  • the sliding speed is set to “fast“

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image5-36.png" data-lazy- height="545" src="data:image/svg xml,” width=”887″>

Output

Before sliding-up

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image7-33.png" data-lazy- height="150" src="data:image/svg xml,” width=”871″>

After sliding in the upward direction

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image6-33.png" data-lazy- height="103" src="data:image/svg xml,” width=”868″>

How to use the slideDown() method

The slideDown() method slides the element in the downward direction.

Syntax

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

Example

The usage of the jQuery slideDown() method is shown by exercising the following code.

<script>

$(document).ready(function(){

  $(“.main”).click(function(){

    $(“.sec”).slideDown(“slow”);

  });

});

</script>

The above code is described as,

  • the “.main” class of paragraph is created and it is used as a primary element(used to slide down the panel)
  • the “.sec” refers to another paragraph that will be slid down after clicking on “.main” class paragraph
  • the speed of sliding is set to slow

Note: The element that will be slid down must have the display property set to none.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image9-22.png" data-lazy- height="551" src="data:image/svg xml,” width=”816″>

Output

Before sliding down

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image8-25.png" data-lazy- height="117" src="data:image/svg xml,” width=”874″>

Upon clicking, the paragraph(class=”sec“) will be slid down as shown below.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image2-53.png" data-lazy- height="164" src="data:image/svg xml,” width=”869″>

How to use the slideToggle() method

The slideToggle() slides up the element if the element is in a slide-down state and if the element is in a slide-up state, it would slide the element in a downward direction.

Syntax

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

Example

To practice the jQuery slideToggle() method, we made use of the following code.

<script>$(document).ready(function(){

  $(“.prim”).click(function(){

    $(“.sec”).slideToggle(1000);

  });

});

</script>

In the above code,

  • the “prim” class represents the primary element(on which the sliding depends)
  • the “sec” class refers to the element which will be slid up/down
  • the sliding speed is set in milliseconds (1000)

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image1-51.png" data-lazy- height="555" src="data:image/svg xml,” width=”818″>

Output

Before sliding

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image4-50.png" data-lazy- height="148" src="data:image/svg xml,” width=”869″>

After applying the slideToggle() method

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image3-49.png" data-lazy- height="68" src="data:image/svg xml,” width=”867″>

If you keep on clicking the primary element, the slider will keep on changing its state.

Conclusion

To slide an element in an upward or downward direction, jQuery offers three methods: slideDown(), slideUp(), and slideToggle(). This descriptive post provides the working as well as the usage of each sliding method. The slideDown() and slideUp() methods are exercised to slide the element in downward and upward directions respectively. On the other hand, the slideToggle() method changes the current state of the element from slide-up to slide-down and vice versa.

Show Comments