Home » jQuery » jQuery Slide
The jQuery slideUp() and slideDown() methods are typically used to hide or show the HTML elements by gradually decreasing or increasing their height (i.e by sliding them up or down).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Slide-Up and Slide-Down Effects</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p{
padding: 15px;
background: #B0C4DE;
}
</style>
<script>
$(document).ready(function(){
// Slide up displayed paragraphs
$(".up-btn").click(function(){
$("p").slideUp();
});
// Slide down hidden paragraphs
$(".down-btn").click(function(){
$("p").slideDown();
});
});
</script>
</head>
<body>
<button type="button" class="up-btn">Slide Up Paragraphs</button>
<button type="button" class="down-btn">Slide Down Paragraphs</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Similar, to other jQuery effects methods, one can optionally specify the duration or speed parameter by the slideUp() and slideDown() methods to control how long the slide animation will run. The durations can be specified either by using any of the predefined strings 'slow' or 'fast', or in some milliseconds (i.e higher values indicate slower animations).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Slide-Up and Slide-Down Effects with Different Speeds</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p{
padding: 15px;
background: #B0C4DE;
}
</style>
<script>
$(document).ready(function(){
// Sliding up displayed paragraphs with different speeds
$(".up-btn").click(function(){
$("p.normal").slideUp();
$("p.fast").slideUp("fast");
$("p.slow").slideUp("slow");
$("p.very-fast").slideUp(50);
$("p.very-slow").slideUp(2000);
});
// Sliding down hidden paragraphs with different speeds
$(".down-btn").click(function(){
$("p.normal").slideDown();
$("p.fast").slideDown("fast");
$("p.slow").slideDown("slow");
$("p.very-fast").slideDown(50);
$("p.very-slow").slideDown(2000);
});
});
</script>
</head>
<body>
<button type="button" class="up-btn">Slide Up Paragraphs</button>
<button type="button" class="down-btn">Slide Down Paragraphs</button>
<p class="very-fast">This paragraph will fade in/out with very fast speed.</p>
<p class="normal">This paragraph will fade in/out with default speed.</p>
<p class="fast">This paragraph will fade in/out with fast speed.</p>
<p class="slow">This paragraph will fade in/out with slow speed.</p>
<p class="very-slow">This paragraph will fade in/out with very slow speed.</p>
</body>
</html>
The callback function can be specified to be executed after the slideUp() or slideDown() method completes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Slide-Up and Slide-Down Effects with Callback</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p{
padding: 15px;
background: #B0C4DE;
}
</style>
<script>
$(document).ready(function(){
// Display alert message after sliding up paragraphs
$(".up-btn").click(function(){
$("p").slideUp("slow", function(){
// Code to be executed
alert("The slide-up effect is completed.");
});
});
// Display alert message after sliding down paragraphs
$(".down-btn").click(function(){
$("p").slideDown("slow", function(){
// Code to be executed
alert("The slide-down effect is completed.");
});
});
});
</script>
</head>
<body>
<button type="button" class="up-btn">Slide Up Paragraphs</button>
<button type="button" class="down-btn">Slide Down Paragraphs</button>
<p>This is a paragraph.</p>
</body>
</html>
The jQuery slideToggle() method shows or hides all selected elements by animating their height in such a way that if the element is previously displayed, it will be slide up; if hidden, it will be slide down (i.e it toggles between the slideUp() and slideDown() methods).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Slide-Toggle Effect</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p{
padding: 15px;
background: #B0C4DE;
}
</style>
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>
</head>
<body>
<button type="button" class="toggle-btn">Slide Toggle Paragraphs</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
More so, you can specify the duration parameter for the slideToggle() method such as the slideUp() and slideDown() methods in other to control the speed of the slide toggle animation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Slide-Toggle Effects with Different Speeds</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p{
padding: 15px;
background: #B0C4DE;
}
</style>
<script>
$(document).ready(function(){
// Slide Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").slideToggle();
$("p.fast").slideToggle("fast");
$("p.slow").slideToggle("slow");
$("p.very-fast").slideToggle(50);
$("p.very-slow").slideToggle(2000);
});
});
</script>
</head>
<body>
<button type="button" class="toggle-btn">Fade Toggle Paragraphs</button>
<p class="very-fast">This paragraph will slide up/down with very fast speed.</p>
<p class="normal">This paragraph will slide up/down with default speed.</p>
<p class="fast">This paragraph will slide up/down with fast speed.</p>
<p class="slow">This paragraph will slide up/down with slow speed.</p>
<p class="very-slow">This paragraph will slide up/down with very slow speed.</p>
</body>
</html>
Also, you can specify a callback function for the slideToggle() method.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Slide-Toggle Effects with Callback</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p{
padding: 15px;
background: #B0C4DE;
}
</style>
<script>
$(document).ready(function(){
// Display alert message after slide toggling paragraphs
$(".toggle-btn").click(function(){
$("p").slideToggle(1000, function(){
// Code to be executed
alert("The slide-toggle effect is completed.");
});
});
});
</script>
</head>
<body>
<button type="button" class="toggle-btn">Fade Toggle Paragraphs</button>
<p>This is a paragraph.</p>
</body>
</html>