This Angular tutorial helps you get started with Angular quickly and effectively through many practical examples.

jQuery SlideUp

jQuery slideUp() Method

The jQuery slideUp() method is used to slide up an HTML element.

Syntax

$(selector).slideUp(speed,callback);

  1. speed -It specifies the speed of the slideUp effect. Default value is 400 milliseconds. Possible values:

    • milliseconds
    • slow
    • fast
  2. callback - A function to be executed after the slideUp method is completed.

The following example demonstrates the slideUp() method.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script> 
$(document).ready(function(){
$("#flipid").click(function(){
$("#panelid").slideUp("slow");
});
});
</script>
<style> 
#flipid {
padding: 5px;
text-align: center;
background-color: red;
border: solid 1px green;
}

#panelid {
padding: 5px;
text-align: center;
background-color: green;
border: solid 1px green;
color:white;
}

#panelid {
padding: 50px;
}
</style>
</head>
<body>

<div id="flipid">Click to slide Up</div>
<div id="panelid">Tutorialstrend.com!</div>

</body>
</html>

Output

jquery slideUp method

Now click on the Click to slide Up. It will slide up as following:

jquery slideUp method
Prev Next