Skip to content
Related Articles

Related Articles

jQuery | slideToggle() Method
  • Last Updated : 19 Feb, 2019
GeeksforGeeks - Summer Carnival Banner

The slideToggle() Method in jQuery is used to show the hidden elements or hide the visible elements respectively i.e. it toggles between the slideUp() and slideDown() methods.

  • slideDown() is run when the element is hidden.
  • slideUp() is run when the element is visible.

Syntax:

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

Parameters: This method accepts three parameter as mentioned above and described below:

  • Speed: It is an optional parameter and used to specify the speed of the fading effect. The default value of speed is 400 millisecond. The possible value of speed are:
    • milliseconds
    • “slow”
    • “fast”
  • easing: It is an optional parameter and used to specify the speed of element to different points of animation. The default value of easing is “swing”. The possible value of easing are:
    • “swing”
    • “linear”
  • callback: It is optional parameter. The callback function is executed after slideToggle() method is completed.

Below example illustrates the slideToggle() method in jQuery:

Example: This example display or hide the element.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        jQuery slideToggle() Method
    </title>
      
    <script src=
    </script>
      
    <!-- Script to illustrates slideToggle() method -->
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $("h1").slideToggle();
            });
        });
    </script>
</head>
  
<body>
  
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
  
    <button>
        Click on button to hide/show content
    </button>
</body>
  
</html>                    

Output:

  • Before click on the button:
  • After single click on the button:
  • After double click on the button:

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 :