jQuery slideUp() with Examples

jQuery Web Development Front End Technology

The slideUp() method in jQuery is used to slide up the selected element i.e. to hide them.

Syntax

The syntax is as follows −

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

Above, the parameter speed is the speed of the slide effect. Here, easing is the speed of the element in different points of the animation, whereas callback is a function to be executed after slideUp() completes.

Example

Let us now see an example to implement the jQuery slideUp() method −

Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
      $(".button1").click(function(){
         $("p").slideUp();
      });
      $(".button2").click(function(){
         $("p").slideDown();
      });
   });
</script>
</head>
<body>
<h2>Exam Info</h2>
<p>Examination begins on 24th December. The students are requested to submit project report before 15th December.</p>
<button class="button1">Slide up (Hide)</button>
<button class="button2">Slide down (Display)</button>
</body>
</html>