Question

I made a button click that I want to open/close my side menu.
I did this:

$("#middleleftopenclose").click(function() {
     $("#middleleft").css("width", 0);
     $("#middleleftopenclose").css("opacity", 1);
     $("#middleright").css("margin-left", 15);
});

How would I go about making the same button click open the menu back as well?

Thanks

Answer 1

Well as a simple solution, you could have a boolean flag storing the current state of the sidebar and test against it every time the button is clicked.

var sidebarVisible = false;

$("#middleleftopenclose").click(function() {
  if (sidebarVisible){
    // close sidebar
  }else{
    // open sidebar
  }
  // toggle boolean flag each time button is clicked
  sidebarVisible = !sidebarVisible;
});

I see you are actually altering the css properties of the element within the function… Perhaps it would be better to create classes with the appropriate properties for each state and simply swap the classes when the button is clicked. Meliborn mentions this in a comment.