jQuery slideToggle()

The jQuery slideToggle() method is used to switch between the slideUp and slideDown states.

  • If the HTML element is hidden or already slided up, slideToggle() method makes them slide down.
  • If the HTML element is visible or already slided down, slideToggle() method makes them slide up.

Syntax - jQuery slideToggle()

Following is the syntax to use jQuery slideToggle() method

  • jQuery slideToggle - Default

    To slide-up/slide-down a selected HTML Element with default timing,
     $("htmlElement").slideToggle();
  • jQuery slideToggle - slow/fast

    You can also provide a "slow" or "fast" argument to the slideToggle() method to make the slide-up/slide-down process slow or fast respectively.
     $("htmlElement").slideToggle("slow");
     $("htmlElement").slideToggle("fast");
  • jQuery slideToggle - Time in milliseconds

    To control the timing precisely, you can provide time in milliseconds as the argument to jQuery slideToggle() method
     $("htmlElement").slideToggle(4000); // for 4000 milliseconds
  • jQuery slideToggle - Callback Function

    You can also provide an optional callback function as second argument to slideToggle() method, to execute when the slide-up/slide-down effect is completed on the HTML element.
    $("htmlElement").slideToggle(4000, function(){
     emsp;alert("Fading completed.")
    });

Examples - jQuery slideToggle()

Following examples help you understand the usage of jQuery slideToggle() method :

Example - Basic jQuery slideToggle()

Following example illustrates the basic usage of jQuery slideToggle() method.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("#slideToggleBtn").click(function(){
  $("#div1").slideToggle();
 });
});
</script>
</head>
<body>

<p>jQuery slideToggle() example</p>

<button id="slideToggleBtn">Click to toggle sliding effect</button><br><br>

<div id="div1" style="width:100%;height:80px;background-color:yellow;text-align:center;">
<a style="line-height:80px;">Learn jQuery slideToggle - Default</a>
</div><br>

</body>
</html>
Try Online

Example - jQuery slideToggle("slow"), slideToggle("fast")

You can provide one of the two options "slow", "fast" to control the speed of the sliding effect.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("#slideToggleBtn").click(function(){
    $("#div1").slideToggle("slow");
    $("#div2").slideToggle("fast");
 });
});
</script>
</head>
<body>

<p>jQuery slideToggle() example</p>

<button id="slideToggleBtn">Click to toggle sliding effect</button><br><br>

<div id="div1" style="width:100%;height:80px;background-color:yellow;text-align:center;">
<a style="line-height:80px;">Learn jQuery slideToggle - "slow"</a>
</div><br>
<div id="div2" style="width:100%;height:80px;background-color:yellow;text-align:center;">
<a style="line-height:80px;">Learn jQuery slideToggle - "fast"</a>
</div>
</body>
</html>
Try Online

Example - jQuery slideToggle(time_in_milliseconds)

You can control the sliding speed at the precision of milliseconds. Provide a value in milliseconds as first argument.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("#slideToggleBtn").click(function(){
    $("#div1").slideToggle(4000);
    $("#div2").slideToggle(1000);
 });
});
</script>
</head>
<body>

<p>jQuery slideToggle() example</p>

<button id="slideToggleBtn">Click to toggle sliding effect</button><br><br>

<div id="div1" style="width:100%;height:80px;background-color:yellow;text-align:center;">
<a style="line-height:80px;">Learn jQuery slideToggle - 4000 milliseconds</a>
</div><br>
<div id="div2" style="width:100%;height:80px;background-color:yellow;text-align:center;">
<a style="line-height:80px;">Learn jQuery slideToggle - 1000 milliseconds</a>
</div>
</body>
</html>
Try Online

Example - jQuery slideToggle with Callback function

Callback function is an optional second argument. The callback function is called when the slide-up /slide-down effect is completed. In the following example, we have provided a callback function with alert statement inside the body. You can provide your own statements inside the callback function.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("#slideToggleBtn").click(function(){
  $("#div1").slideToggle(4000, function(){
      alert("Sliding completed.");
    });
 });
});
</script>
</head>
<body>

<p>jQuery slideToggle() example</p>

<button id="slideToggleBtn">Click to toggle sliding effect</button><br><br>

<div id="div1" style="width:100%;height:80px;background-color:yellow;text-align:center;">
<a style="line-height:80px;">Learn jQuery slideToggle with Callback function</a>
</div>
</div>
</body>
</html>
Try Online

Conclusion

In this jQuery Tutorial, we have learnt jQuery slideToggle() method : Syntax and Usage with examples.