In jQuery slideToggle() method is used to toggle between slideDown() and slideUp() effects.
If the HTML elements have been slide down, slideToggle() will slide them up.
If the elements have been slide up, slideToggle() will slide them down.
jQuery slideToggle() Syntax
The speed parameter is required and used to specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
Please see the below example to get better knowledge about slideToggle().
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slide toggle</title>
<style>
#panel{
height: 150px;
width: 150px;
background-color: #66ff6b;;
border-radius: 50%;
display: inline-block;
}
#panel {
padding: 50px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="panel"></div>
<br>
<button id="flip">Click to slide toggle</button>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
</body>
</html>
Run it Yourself »