Hide/Show button not working in jquery

  • A+

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" />

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"); } 


:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: