jQuery slideUp() Method
Last Updated :
18 Nov, 2022
Improve
The slideUp() is an inbuilt method in jQuery which is used to hide the selected elements.
Syntax:
$(selector).slideUp(speed);
Parameter: It accepts an optional parameter "speed" which specifies the speed of the duration of the effect.
jQuery examples to show the working of slideUp() method:
Example 1: In the code below, no parameter is passed to this method.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!--jQuery code to show the working of this method-->
<script>
$(document).ready(function () {
$(".btn1").click(function () {
$("p").slideUp();
});
});
</script>
<style>
div {
width: 300px;
height: 100px;
padding: 20px;
border: 2px solid green;
}
</style>
</head>
<body>
<div>
<p>This paragraph will get hide.</p>
<!-- click on this button -->
<button class="btn1">Slide up</button>
</div>
</body>
</html>
Output:
Example 2: In the below code, speeding parameter is passed to this method.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!--jQuery code to show the working of this method-->
<script>
$(document).ready(function () {
$(".btn1").click(function () {
$("p").slideUp(3000);
});
});
</script>
<style>
div {
width: 300px;
height: 100px;
padding: 20px;
border: 2px solid green;
}
</style>
</head>
<body>
<div>
<p>This paragraph will get hide.</p>
<!-- click on this button -->
<button class="btn1">Slide up</button>
</div>
</body>
</html>
Output:
