jQuery slideToggle() Method

jQuery slideToggle() method perform sliding up or slide down motion effect to hide or show the selected elements. The slideToggle() method animates the height of the selected elements.

jQuery slideToggle() method toggles between slideUp() and slideDown() method.

Syntax

This syntax represent to the slideToggle() method

$(selector).slideToggle( duration, easing, callback );
Parameter Type Description
duration Number
String		 Required. Accept string or number that determining how long the slide effect will run.
default value is 400
Accepted values:
  • Predefined duration ("slow", "normal", "fast")
  • number of milliseconds (3000, 1000)
easing String Optional. Specifies the which easing function to use for the transition.
default value is "swing"
Accepted values:
  • "swing" - elements moves slows at the starting and ending, but faster in the middle
  • "linear" - elements moves in a constant speed
callback Function Optional. A function to call once the the slide effect is complete.

Example

Here, in this example show slideToggle() effect on selected elements when click on button.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery slideToggle() method</title>
  <script src="jquery-latest.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#click").click(function(){
        $("#slide").slideToggle("slow");
      });
    });
  </script>
  <style type="text/css"> 
    #slide, #click {
      font-family: Verdana;
      font-size: 14px;
      background: #CCCCCC;
      border: 1px solid #c3c3c3;
      text-align: center;
    }
    #slide {
      display: none;
      height: 60px;
    }
  </style>
</head>
<body> 
  <div id="slide">
    <p>This paragraph text represent slide panel text and it's running slide effect.</p>
  </div>
  <p id="click">Click me to slide toggle</p>
</body> 
</html>

Run it...   »