The jQuery fadeToggle() method slides the elements upside, if the elements have been slid down, and slides the elements down if the elements have been slid up.
The jQuery slideToggle() method is used to toggle the elements in between the slideUp() and slideDown() methods.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle();
});
});
</script>
<style>
#panel, #flip {
padding: 2px;
text-align: center;
background-color: red;
border: solid 2px black;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flip">Click to slide me up or down</div>
<div id="panel">Hello world!</div>
</body>
</html>
The jQuery slideToggle() method can also include some other parameters to make the effect of showing the selected elements more specific.
Syntax:
$(selector).slideToggle(speed, callback);
Speed:
- Speed is an optional parameter that specifies the speed of the delay in the animation, with a default value of 400 milliseconds, a fast value of 200 milliseconds, and a slow value of 600 milliseconds.
- This parameter can also accept a value directly in milliseconds.
Callback:
- Callback is the optional function to be executed once the slideToggle() method’s execution is complete.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle(5000);
});
});
</script>
<style>
#panel, #flip {
padding: 2px;
text-align: center;
background-color: red;
border: solid 2px black;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flip">Click to slide me up or down</div>
<div id="panel">Hello world!</div>
</body>
</html>