Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :