I have a structure that repeats recursively like this :
HTML:
<!-- Root -->
<div class="divRoot">
<!-- Level 1, Item 1 -->
<div class="divBranch">
<!-- Toggle Trigger for following content -->
<div class="divTrigger">
<span class="lblName"> Level 1, Item 1 </span>
</div>
<!-- Level Two, Item 1 -->
<div class="divBranch">
<div class="divTrigger">
<span class="lblName"> Level 2, Item 1 </span>
</div>
<!-- Repeat the pattern as needed -->
</div>
</div>
<!-- Level 1, Item 2 -->
<div class="divBranch">
<!-- Toggle Trigger for following content -->
<div class="divTrigger">
<span class="lblName"> Level 1, Item 2 </span>
</div>
<!-- Level Two, Item 2 -->
<div class="divBranch">
<div class="divTrigger">
<span class="lblName"> Level 2, Item 2 </span>
</div>
<!-- Repeat pattern as needed -->
</div>
</div>
</div>
I need to check if any items are visible in another branch when I am toggling an item in any branch. The items visibility is the additional selector filter. It has to be visible so I can find it and hide all items in another branch as the triggered branch is displayed.
I can't just chain up the tree until I hit root and start going back down to the others. I tried that and it slowed the page down dramatically locally. I don't even want to see what it does on a live site.
Another thought is to search the root element for descendants of class divBranch that are visible and not contained in trigger ancestors, descendants and is not itself, but I don't know how to do that.
Any suggestions of how to accomplish this?