Remove class when user clicks wherever on the page

Question

I have 2 button which will toggle/remove class when user clicks on it.

$('.social-toggle').on('click', function() {
  $('.social-networks').not($(this).next()).removeClass('open-menu')
  $(this).next().toggleClass('open-menu');
});

Clicking on another share button will open another box at the same time the first is closed. But want Clicking anywhere outside the box close them. Do yo know how can i do that? Also here is my HTML

<div class="share-button">
  <a href="#" class="social-toggle">Share</a>
<div class="social-networks">
  <ul>
    <li class="social-twitter">
      <a href="http://www.twitter.com">T</a>
    </li>
    <li class="social-facebook">
    <a href="http://www.facebook.com">F</a>
    </li>
    <li class="social-gplus">
    <a href="http://www.gplus.com">G+</a>
    </li>
  </ul>
</div>
   </div>

JSFIDDLE

Related: http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element. Use that to remove the class. — Matt, Sep 15 '14 at 16:53

score 1 · Accepted Answer · answered Sep 15 '14 at 16:52

You could register a click handler for the document, then check whether the target was a .social-toggle(to prevent double processing - another option is to stop the propagation of click from .social-toggle handler.) element if not close the opened .social-networks element.

$(document).click(function (e) {
    if (!$(e.target).hasClass('social-toggle')) {
        $('.social-networks.open-menu').removeClass('open-menu')
    }
})

Demo: Fiddle

Using propagation(not a fan of this approach because if you need similar functionality in another part of the page that will be broken if you stop the propogation)

$('.social-toggle').on('click', function (e) {
    e.stopPropagation();
    $('.social-networks').not($(this).next()).removeClass('open-menu')
    $(this).next().toggleClass('open-menu');
});

$(document).click(function (e) {
    $('.social-networks.open-menu').removeClass('open-menu')
})

Demo: Fiddle

Remove class when user clicks wherever on the page

1 Answers1