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.

In this tutorial, you will learn about jQuery slideToggle() method, its syntax and usage, with examples.

Syntax – slideToggle()

Following is the syntax to use jQuery slideToggle() method with different values for parameters.

1. jQuery slideToggle – Default

To slide-up/slide-down a selected HTML Element with default timing,

</>
Copy
$("htmlElement").slideToggle();

2. 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.

</>
Copy
$("htmlElement").slideToggle("slow");
$("htmlElement").slideToggle("fast");

3. jQuery slideToggle – Time in milliseconds

To control the timing precisely, you can provide time in milliseconds as the argument to jQuery slideToggle() method

</>
Copy
$("htmlElement").slideToggle(4000); // for 4000 milliseconds

4. 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.

</>
Copy
$("htmlElement").slideToggle(4000, function(){
  alert("Fading completed.")
});

Examples – jQuery slideToggle()

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

1. Example – Basic jQuery slideToggle()

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

</>
Copy
<!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>

2. Example – jQuery slideToggle(“slow”), slideToggle(“fast”)

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

</>
Copy
<!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>

3. 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.

</>
Copy
<!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>

4. 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.

</>
Copy
<!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>

Conclusion

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