Question

Pretty new to jquery/javascript, but proficient in html/css…

I have a list of siblings with the class .item. Each is a pin on a map. I’d like to achieve 3 things:

• Open/close toggle on click, using a class of ‘active’ which I manipulate with CSS
• When one .item is open, clicking another with close it and also open the new one
• When clicking outside an .item, it will close

I’ve seen a few examples using IDs, but hopefully I can just use the .item class, or perhaps a parent id – #map.

I’ve achieved the first point using toggleClass()

$('#map .item').click(function() {
    $(this).toggleClass('active');
});

Simplified html:

<div id="map">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

Thanks for any help.

Answer 1

If I correctly understood, this should work:

$(function () {
    $('#map .item').click(function(evt) {
        evt.stopPropagation(); //stops the document click action
        $(this).siblings().removeClass('active');
        $(this).toggleClass('active');
    });


    $(document).click(function() {
        $('#map .item').removeClass('active'); //make all inactive
    });
});

You can read more about the event bubbling here http://api.jquery.com/event.stopPropagation/