Question

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.

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 ?

<div class="notiftitle" id="notiftitle">
<a href="#" class="alerts">Notifications</a>
 <div class="subpanel">
    <div id="title">New Notifications</div>
    <ul>
      <li>Data</li>
    </ul>
  </div>
</div>

$(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
    });


});

Answer 1

It sounds like you need the “outerClick”-event. ouerClick jQuery plugin by Jon Kassen.