jQuery Effect slideToggle() Method

Quiz

The slideToggle() method in jQuery is used to animate the height of selected elements. It toggles between the slideDown() and slideUp() methods for the selected elements. This method checks the selected elements for visibility. If an element is currently hidden, it triggers the slideDown() effect. Alternatively, if the element is already visible, it initiates the slideUp() effect. This produces a toggle effect.

Syntax

Following is the syntax of sideToggle() method in jQuery −

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

Parameters

This method accepts the following optional parameters −

speed (optional): A string or number determining how long the animation will run. Default value is 400 milliseconds. Possible values are: milliseconds, slow, fast.
easing (optional): A string indicating which easing function to use for the transition. Default value is "swing". Possible values are: swing, linear.
callback (optional): A function to be executed once the animation is complete.

Example 1

The following example toggles the visibility of a paragraph when the button is clicked −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#toggleBtn").click(function(){
    $("#toggleParagraph").slideToggle();
  });
});
</script>
</head>
<body>

<button id="toggleBtn">Toggle Paragraph</button>
<p id="toggleParagraph" style="display:none;">This paragraph will slide up and down.</p>
</body>
</html>

When we click on the button, we can see the toggle effect on the paragraph element.

Example 2

The below example toggles the visibility of an image when clicked with a duration of 1000 milliseconds and linear easing −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#toggleImage").click(function(){
    $("#image").slideToggle(1000, "linear");
  });
});
</script>
</head>
<body>

<img id="image" src="https://cdn.pixabay.com/photo/2023/05/20/16/48/dog-8006839_1280.jpg" height="300px" width="400px" style="display:none;">
<button id ="toggleImage">Toggle Image</button>
</body>
</html>

When we click on the button, we can see the toggle effect on the image element.

Example 3

In this example, we are also passing the callback function to the jQuery slideToggle() method −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#toggleBtn").click(function(){
    $("#toggleList").slideToggle(1000, function(){
      alert("toggle animation completed!")
    });
  });
});
</script>
</head>
<body>
<button id="toggleBtn">Toggle List</button>
<ul id="toggleList" style="display:none;">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>jQuery</li>
</ul>
</body>
</html>

When we click on the button, the <div> element will be toggled. After the toggle animation completes, an alert will pop up with the message "toggle animation completed".

jquery_ref_effects.htm

Print Page