jQuery slideUp(), slideDown(), and slideToggle() Functions
slideUp() Method
The slideUp() method hides the selected elements with a sliding motion, gradually reducing their height to zero.
$("#element").slideUp();slideDown() Method
The slideDown() method shows the selected elements with a sliding motion, gradually increasing their height from zero to their natural height.
$("#element").slideDown();slideToggle() Method
The slideToggle() method toggles the sliding motion of the selected elements. If the elements are visible, slideToggle() will slide them up to hide them; if they are hidden, slideToggle() will slide them down to show them.
$("#element").slideToggle();All in one Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hide and Show</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$(".box").slideUp(2000);
});
$(".btn2").click(function(){
$(".box").slideDown(1000);
});
$(".btn3").click(function(){
$(".box").slideToggle(500);
});
});
</script>
</head>
<body>
<style>
.box{
background-color: blueviolet;
width: 200px;
height: 200px;
margin:50px;
}
</style>
<div class="box"></div>
<button class="btn1">Slide Up</button>
<button class="btn2">Slide Down</button>
<button class="btn3">Slide Toggle</button>
</body>
</html>