title: If div is not hidden click anywhere to hide
body: <p>I am trying to make a div hidden by default and show by clicking a button. To close the div, I can either click on the button or anywhere else on the screen. Below is my attempt but the closing part is not working. I appreciated if anyone can point me to the right implementation or maybe a better way to do this.</p>
  
  <pre><code>$('#theDiv').hide();
  
  $("#showDivBtn").click(function(){
    $("#theDiv").show();
  });
  
  if ( !$('#theDiv:hidden') ) {
  
  $(document).click(function() {
      $('#theDiv').hide();
  });
  $('#theDiv').click(function(e) {
      e.stopPropagation(); 
      return false;        
  });
  
  }
  
  });
  </code></pre>