JQUERY: Close a div if user clicks outside of it
<p>I have a hidden div that opens up with a user clicks on the the title (Notifications).  The "subpanel" div is hidden by default, but using jquery it will toggle open/close when a user clicks on the word Notifications.   </p>

<p>How can I modify my jquery so that if a user clicks outside of the div that is toggled open (subpanel), this would also trigger the subpanel to close/hide ?</p>

<pre><code>&lt;div class="notiftitle" id="notiftitle"&gt;
&lt;a href="#" class="alerts"&gt;Notifications&lt;/a&gt;
 &lt;div class="subpanel"&gt;
    &lt;div id="title"&gt;New Notifications&lt;/div&gt;
    &lt;ul&gt;
      &lt;li&gt;Data&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<pre>
$(document).ready(function(){

    //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
    $(".alerts").click(function(){
        $(this).toggleClass("notiftitleactive");
        $(this).toggleClass("active").next().slideToggle(50);
        return false; //Prevent the browser jump to the link anchor
    });


});
</pre>
