The slideToggle() is a method in jQuery which is an alternative for two separate methods namely slideUp() and slideDown().
This actually plays with the CSS display property of the element and provides a slight animation to it. If the element has a “display:none“, the slideDown() functionality gets toggled, and if the display is set to any other property, slideUp() comes into the picture.
Syntax:
$(<selector>).slideToggle(<speed>,<ease_property>,<function>);
Parameters: Multiple parameters can be passed to the function such as speed of the animation, the type of easing property (swing & linear), and the callback function.
- speed: The default value of the speed parameter is 400 milliseconds. This is an optional parameter. Other options are “fast” and “slow”.
- ease_property: The default property is “swing” and “linear”. This is also an optional parameter.
- callback_function: This has to be defined by the user and this is also an optional parameter.
Example 1: The following example demonstrates the slideToggle() method.
<!DOCTYPE html> <html>
<head>
<title>slideToggle functionality</title>
<script src=
</script>
</head>
<body>
<h2>Welcome To GFG</h2>
<button id="slide-toggle">toggle</button>
<h1 id="textbox">geeksforgeeks.org</h1>
<script>
$("#slide-toggle").on("click", function () {
$("#textbox").slideToggle();
});
</script>
</body>
</html>
|
Output:
Example 2: The following example code demonstrates the usage of parameters in the slideToggle() method.
<!DOCTYPE html> <html>
<head>
<title>slideToggle functionality</title>
<script src=
</script>
</head>
<body>
<h2>Welcome To GFG</h2>
<button id="slide-toggle">toggle</button>
<h1 id="textbox">geeksforgeeks.org</h1>
<script>
$("#slide-toggle").on("click", function () {
$("#textbox").slideToggle(3000, "swing", function () {
alert("slide toggle clicked");
});
});
</script>
</body>
</html>
|
Output:
This is how the slideToggle() function works and these are generally useful for normal working websites. This function is not very useful if we want to create an aesthetic as the animation is not very smooth.