text: Q:
  
  Click off menu/div to close
  
  I've been trying to make my menu close when I click anywhere on the page except for within the menu. 
  I managed to achieve this for when a link is clicked within the menu by giving it the same onclick function as the menu button, but I am not succeeding at clicking off the menu to close it. 
  http://codepen.io/anon/pen/LEvdmW
  JS
  function setVisibility(id) {
    var targetButton;
    switch( id ) {
      case "layer":
        targetButton = "button";
        break;
    }
    if (document.getElementById(targetButton).value == 'Close') {
      document.getElementById(targetButton).innerHTML = 'Open';
      document.getElementById(targetButton).value = 'Open';
      document.getElementById(id).style.display = 'none';
    } else {
      document.getElementById(targetButton).innerHTML = 'Close';
      document.getElementById(targetButton).value = 'Close';
      document.getElementById(id).style.display = 'inline';
    }
  }
  
  HTML
  <button name="type" id="button" onclick="setVisibility('layer')">Open</button>
  <div id="layer"><a onclick="setVisibility('layer')"> Hello</div>
  
  CSS
  #layer {
      position: absolute;
      left: 8px;
      top: 50px;
      background-color: #989898;
      width: 280px;
      height: 100px;
      padding: 10px;
      color: black;
      display: none;
  }
  
  button {  border:none; background:#989898; color:#fff; padding:10px; outline:none; cursor:pointer;
  
  }
  
  A:
  
  It can be achieved via below code.
  $(document).mouseup(function (e)
  {
      var container = $("YOUR CONTAINER SELECTOR");
  
      if (!container.is(e.target) // if the target of the click isn't the container...
          && container.has(e.target).length === 0) // ... nor a descendant of the container
      {
          container.hide();
      }
  });
  
  Working Fiddle: http://jsfiddle.net/LCB5W/153/
  Updated Fiddle: http://jsfiddle.net/LCB5W/154/
  
  