Try it Yourself: jQuery Slide

jQuery Slide

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>

<button id="openBtn">Open</button>
<button id="closeBtn">Close</button>
<div id="panel" style="display:none;">Panel content</div>

<script>
$("#openBtn").click(function() {
  $("#panel").slideDown("slow");
});

$("#closeBtn").click(function() {
  $("#panel").slideUp(600);
});
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>

<button id="openBtn">Open</button>
<button id="closeBtn">Close</button>
<div id="panel" style="display:none;">Panel content</div>

<script>
$("#openBtn").click(function() {
  $("#panel").slideDown("slow");
});

$("#closeBtn").click(function() {
  $("#panel").slideUp(600);
});
</script>

</body>
</html>