Skip to content
Related Articles

Related Articles

jQuery slideUp() Method

Improve Article
Save Article
  • Last Updated : 18 Nov, 2022
Improve Article
Save Article

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. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </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. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </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:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!