Hide/Show button not working in jquery

Question

I need help with below code, I created a button to show and hide a div. I applied some jQuery to it. Everything seems to be fine to me but it is still not working, I cannot seem to find why?

$(document).ready(function() {

  $("#closeButton").click(function() {
    if ($("#closeButton").val() == "Close Drawer") {
      $("#topDrawer").hide();
      $("#closeButton").val("Open Drawer");
    }
    if ($("#closeButton").val() == "Open Drawer") {
      $("#topDrawer").show();
      $("#closeButton").val("Close Drawer");
    }
  });

});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron" id="topDrawer">
  <span id="appName">App Name<span>
</div>
<input type="button" value="Close Drawer" class="btn btn-primary btn-sm" id="closeButton" />

Answer 1

You need an else block. Your two if conditions are running one after another. Use

if ($("#closeButton").val() == "Close Drawer") {
      $("#topDrawer").hide();
      $("#closeButton").val("Open Drawer");
}
else if ($("#closeButton").val() == "Open Drawer") {
      $("#topDrawer").show();
      $("#closeButton").val("Close Drawer");
}