Skip to content
Related Articles

Related Articles

jQuery | slideUp() with Examples
  • Last Updated : 13 Feb, 2019

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.

Return Value: It does not return anything simply it hides the selected element.

jQuery code to show the working of slideUp() method:

Code #1:
In the code below, no parameter is passed to this method.




<html>
  
<head>
    <script 
    </script>
    <script>
        <!-- jQuery code to show the working of this method -->
        $(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 :
In the below video, working of this method has been shown.



Code #2:
In the below code, speeding parameter is passed to this method.




<!DOCTYPE html>
<html>
  
<head>
    <script 
    </script>
    <script>
        <!-- jQuery code to show the working of this method -->
        $(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 :
In the below video, the working of this method has been shown.

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :