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
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.
$(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“
Output
Before sliding-up
After sliding in the upward direction
How to use the slideDown() method
The slideDown() method slides the element in the downward direction.
Syntax
Example
The usage of the jQuery slideDown() method is shown by exercising the following code.
$(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.
Output
Before sliding down
Upon clicking, the paragraph(class=”sec“) will be slid down as shown below.
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
Example
To practice the jQuery slideToggle() method, we made use of the following code.
$(".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)
Output
Before sliding
After applying the slideToggle() method
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.
from https://ift.tt/E5erJy9
0 Comments