Slidetoggle is the combination of slideup and slideon function. If an element is moved down, slideToggle() turns it up, the same action continues.
Syntax:
$(selector).slideToggle(speed);
$(selector).slideToggle(speed,callback);
Speed and callback is an optional parameter. Speed specifies the delay of showing elements these possible vales are 'slow', 'fast' and milliseconds. Callback function to be called after completion of slideToggle().
<!DOCTYPE html>
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script>
$(document).ready(function () {
$('#flip').click(function () {
$('#panel').slideToggle('slow');
});
});
</script>
<style>
#flip {
padding: 10px;
text-align: center;
background-color: #e5eecc;
border: 1px solid red;
}
#panel {
padding: 50px;
text-align: center;
background-color:yellow;
border: solid 1px green;
display: none;
}
</style>
</head>
<body>
<div id='flip'>Click to slide up and down panel</div>
<div id='panel'>This is slide up panel <br/><br/><br/>
<img src='oops.png' width='200px' height='200px'/>
</div>
</body>
</html>
Output:
