jQuery slideToggle()

Introduction

Toggle between slideUp() and slideDown() for all <p> elements:

<!DOCTYPE html>
<html>
<head>
<script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>//from   w  w  w.  jav  a  2s .c  om
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>

<p>This is a paragraph.</p>

<button>Toggle slideUp() and slideDown()</button>

</body>
</html>

The slideToggle() method toggles toggle slide actions for the selected elements.

The slideToggle() method checks the selected elements for visibility.

slideDown() is run if an element is hidden.

slideUp() is run if an element is visible.

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

MultiLiineTable:/*ww w. j  a  va2  s .  co m*/

Parameter     Optional         Description

speed         Optional.        speed of the slide effect. 
                               Default value is 400 milliseconds 
                               Possible values: 
                               milliseconds 
                               "slow" 
                               "fast"

easing        Optional.        speed of the element in different points of the animation. 
                               Default value is "swing" 
                               Possible values: 
                               "swing" - moves slower at the beginning/end, faster in the middle 
                               "linear" - moves in a constant speed 

callback      Optional.        A function to be executed after the slideToggle() method is completed

Previous Next