Question

I have that problem, in html I have this code:

<div>
     <div class='category' style="display:block">
        <div> <div onclick="closeOtherCategoryDiv($(this))">Name</div> </div>
        <div class="groups"></div>
    </div>

    <div class='category' style="display:block">
        <div> <div onclick="closeOtherCategoryDiv($(this))">Name</div> </div>
        <div class="groups"></div>
    </div>

    <div class='category' style="display:block">
        <div> <div onclick="closeOtherCategoryDiv($(this))">Name</div> </div>
        <div class="groups"></div>
    </div>
</div>

So if I click on div with function closeOtherCategoryDiv($(this)) I want to set style attribute display:none for all another div.category except clicked.

Answer 1

First, don’t use inline scripts – jQuery makes it far easier to select elements without resorting to this.

Second, take a look at the dom traversal methods here: http://api.jquery.com/category/traversing/

9 times out of 9, everything you need to select can be done with a combination of those methods.

Third, try something like this:

Script:

$(function(){
    $('.toggle').click(function(e){
        $('.toggle').not($(this)).hide();
    });
});

HTML:

<div>
         <div class='category' style="display:block">
            <div> <div class='toggle'>Name</div> </div>
            <div class="groups"></div>
        </div>

        <div class='category' style="display:block">
            <div> <div class='toggle'>Name</div> </div>
            <div class="groups"></div>
        </div>

        <div class='category' style="display:block">
            <div> <div class='toggle'>Name</div> </div>
            <div class="groups"></div>
        </div>
    </div>

And for the love of all that is good and holy in this world, remove the inline scripts.