title: Hide an element when a user clicks outside of it
body: <pre><code>$( document ).on('click', '.toggle_comments', function( event ){
  
      event.preventDefault();
  
      var container = $('div[name="comments"]');
  
      if ( container.css('display') == 'block' ) {
  
          container.hide();
  
          return;
      }
  
      container.fadeIn(500);
  });
  </code></pre>
  
  <p>When <code>.toggle_comments</code> is clicked, the container fades in. Is there a way to do something, ie fadeout, if anything outside the container is clicked WHILE it's display block? Bearing in mind, obviously, that <code>.toggle_comments</code> is outside of it in the first place. So it needs to be a live event, something that only fires while the container is in the state if <code>display:block</code>. </p>