June 21, 2025
JQuery Animation with slideDonw(), slideUp(), slideToggle() methods
In jQuery, we can create smooth animation or visual effects using the slideDown(), slideUp(), and slideToggle() methods. These methods are typically used to show or hide HTML elements with a sliding motion, which provides a more interactive and visually appealing experience for users. slideDown() is used to display a hidden element by sliding it down into view. slideUp() hides a visible element by sliding it upward, effectively collapsing it. slideToggle method is a combination of slideDown and slideUp method. It checks if an HTML element is hide then it shows else if HTML element is visible then it hides the element.
slideDown() method
slideDown() method makes a hidden HTML element visible by sliding it down into view.
slideUp() method
slideUp() method makes an HTML element hidden by sliding it upward, effectively collapsing it.
slideToggle() method
slideToggle method is a combination of slideDown and slideUp method. It checks if an HTML element is hide then it shows else if HTML element is visible then it hides the element.
show(), hide() & toggle() methods example
<html>
<head>
<title>Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="divText">Hello all</div>
<button id="btnslideDown">slideDown</button>
<button id="btnslideUp">slideUp</button>
<button id="btnslideToggle">slideToggle</button>
<script>
$(document).ready(function () {
$("#btnslideDown").click(function(){
$("#divText").slideDown();
});
$("#btnslideUp").click(function(){
$("#divText").slideUp();
});
$("#btnslideToggle").click(function(){
$("#divText").slideToggle();
});
});
</script>
</body>
</html>