title: Show div once clicked and hide when clicking outside
body: <p>I'm trying to show the #subscribe-pop div once a link is clicked and hide it when clicking anywhere outside it. I can get it to show and hide if I change the: </p>
  
  <pre><code>$('document').click(function() {
  </code></pre>
  
  <p>TO</p>
  
  <pre><code>$('#SomeOtherRandomDiv').click(function() {
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="footleft"&gt;
      &lt;a href="#" onclick="toggle_visibility('subscribe-pop');"&gt;Click here to show div&lt;/a&gt;
      &lt;div id="subscribe-pop"&gt;&lt;p&gt;my content&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function toggle_visibility(id) {
          var e = document.getElementById("subscribe-pop");
          if(e.style.display == 'block')
              e.style.display = 'none';
          else
              e.style.display = 'block';
          }
      }
  
      $('document').click(function() {
          $('#subscribe-pop').hide(); //Hide the menus if visible
      });
  
      $('#subscribe-pop').click(function(e){
          e.stopPropagation();
      });
  &lt;/script&gt;
  </code></pre>