Question

I have written this code, that shows a menu (div) when clicking another div. The problem is that when I have one of the menus open, and click the div to open a new menu (there are multiple menus looped out), the other menus do not close. This means I can open an unlimited number of menus simultaneously as long as I am not clicking outside the div/menu…

Short: I want all open menu divs to hide when clicking to open a new menu, except from the menu I just opened…

Code:

$('.commentSettings').click(function(e) {
    var id = $(this).attr('id');
    $('#mod-dropdown' + id).stop().toggle(200);
    e.stopPropagation();
    $('#mod-dropdown' + id).show();

    $(document).click(function(){
        $("#mod-dropdown" + id).hide();
    });
 });

Answer 1

If you give all divs you want to hide a class, for example menu, then you simply could pop $('.menu').hide(); at the start of the click function.

Note that you have a document ready inside the function and I don’t think you wanted to put that there. The document.ready function should always appear first, and you register your event handlers inside that.