Toggle hide ID on click function, show when function toggled again?

Question

I need some help with this: JSfiddle. The problem is, that i would like the button to display:none, or in some way hide, whenever the class .active isOpened - if that makes any sense?

If you look at my JSfiddle, i need the button top/right to dissapear, when ever the slide-out menu/box is out.

 var isOpened = false;
    $(document).click(function(e) {
      if(isOpened && e.target.id!='slide-in') {
        $("#slide-in").removeClass("active");
        isOpened = false;
      } else if(!isOpened && e.target.id=='button'){
        $("#slide-in").addClass("active");
        isOpened = true;
      }
    });

Thank you!

Answer 1

Just hide and show the button respectively in the condition.

    var isOpened = false;
    $(document).click(function(e) {
      if(isOpened && e.target.id!='slide-in') {
        $("#slide-in").removeClass("active");
        isOpened = false;
        $("#button").show();
      } else if(!isOpened && e.target.id=='button'){
        $("#slide-in").addClass("active");
        isOpened = true;
        $("#button").hide();
      }
    });

Here's the Fiddle link