How to make toggleClass() work when clicked outside of an element

Question

I have created a map that has the points(.field-name-field-pin-point) for specific locations, and when the points are clicked, they open up a box with more information about it. The problem is that the points are small so it is annoying to click on them again to turn the boxes off. I just want to alter so that when the user clicks outside of ".group-dealer", the toggleClass(hidden) will be activated.

This is the code that I am using currently that works perfectly for using .field-name-field-pin-point as the on/off toggle:

    jQuery('.node-201 .field-name-field-pin-point').click(function() {
        jQuery(this).siblings('.group-dealer').toggleClass('hidden');/* use toggleClass if more appropriate*/
});

Here is the basic HTML layout:

<div class="node-201">
    <div class="group-dealer">...</div>
    <div class="field-name-field-pin-point">...</div>
</div>

Please, research a little more, before posting. http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element — Alex Pakka, Dec 13 '13 at 00:00

score 0 · Answer 1 · answered Dec 13 '13 at 00:01

Try delegating the events and use e.target to tackle the problem

jQuery(document).click(function(e) {
     if( $(e.target).hasClass('field-name-field-pin-point')) {

          // your code here
     } else {
          // Add the hidden class if clicked outside
          jQuery('.node-201 .field-name-field-pin-point').addClass('hidden');
     }
});

score 0 · Answer 2 · answered Dec 13 '13 at 00:18

Try something like this:

$(function() {
    $('.node').click(function() {
        $(this).find('.group-dealer').toggle();
    })
});

Any time you click an element with a class of 'node' that will find the element with 'class group-dealer' inside the specific node you clicked it and toggle its visibility. You don't have to create a class 'hidden 'with display:none; and toggle that class on and off. jQuery .toggle() will automatically toggle the visibility for you.

How to make toggleClass() work when clicked outside of an element

2 Answers2