title: How do I make a div close when I click anywhere outside it?
body: <p>I have a function that calls a <code>#notify</code> div.</p>
  
  <p>When a user clicks on this div, the function is called.  Then when the user clicks again on that same div, the function is hidden (using toggle).</p>
  
  <p>I was wondering how could I use this same function, but instead have an off click element so if the user off clicks, the div is hidden.</p>
  
  <p>in short
  when user clicks on div (small box) a function is called (a Big box appears underneath the small box) the only way to remove the big box is to click again on the small box. I want the big box to hide when the user clicks anywhere outside the big box.</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function() {
  
  var notify = $("#notify");
  var notifyLink = $("#notify_link");
  var result = $("#result");
  var loader = $('#loader');
  var count = $("#count");
  
  notify.hide();
  notify.click(function(event) {
      // Handle the click on the notify div so the document click doesn't close it
      event.stopPropagation();
  });
  
  notifyLink.click(
  
          function () { notify.toggle(notify.css('display') == 'none');
                  loader.html('&lt;?php echo elgg_view('ajax/loader',array('slashes' =&gt; true)); ?&gt;');    
          result.load("&lt;?php echo $vars['url']; ?&gt;mod/notifications/ajax/data.php",function(){
                          loader.empty(); // remove the loading gif
  
                      });    
          });
  
  notifyLink.toggle(
       function () {
      $(this).addClass("selected");
    },
    function () {
      $(this).removeClass("selected");
    } );
  
       count.load("&lt;?php echo $vars['url']; ?&gt;mod/notifications/ajax/livenum.php");
     var refreshId = setInterval(function() {
        count.load("&lt;?php echo $vars['url']; ?&gt;mod/notifications/ajax/livenum.php");
     }, 2500);
  $.ajaxSetup({ cache: false });
  });
  &lt;/script&gt;
  
  &lt;a href="#" id="notify_link"&gt;&amp;nbsp;&lt;/a&gt;&lt;span id="count"&gt;&lt;/span&gt;
  
  
  &lt;div id="notify" style="display:none;"&gt;
  &lt;h4&gt;Notifications&lt;/h4&gt;
  &lt;div id="loader"&gt;&lt;/div&gt;
      &lt;div id="result" style="width:100%; height:100%;"&gt;&lt;/div&gt;
      &lt;div class="seeall"&gt;&lt;a href="&lt;?php echo $vars['url']; ?&gt;mod/notifications/all.php"&gt;See All Notifications&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>