Question

The HTML:

<ul class="main_list">
    <li class="list_folder">One</li>
    <li class="list_folder">Two</li>
    <li class="list_folder">New list <ul class="hide_list">
            <li class="list_folder">New one</li>
            <li class="list_folder">New Two</li>
            <li class="list_folder">Third list<ul class="hide_list">
                    <li class="list_folder">Third one</li>
                    <li class="list_folder">Third two</li>
                </ul></li>
        </ul></li>
</ul>

What I want to do: All sub lists with class of “hide_list” are hidden with CSS. When I click on li that contains the hidden list, I would like that hidden list to toggle open/close.
My jquery code:

$('.list_folder').on('click',function(){
    $(this).children('.hide_list').slideToggle();
}

The issue: it works on first sub list, but when I click on next sublist deeper it will select the next deeper list and also the outer lists, and in result the whole list will collapse.

What am i doing wrong? Any suggestions?

Answer 1

$('.list_folder').on('click',function(e){
    e.stopImmediatePropagation();
    $(this).find('.hide_list:first').slideToggle();
});

DEMO

Note

You don’t need to use .children(), .find() will accomplish your job.

.stopImmediatePropagation() keeps the rest of the handlers from being
executed and prevents the event from bubbling up the DOM tree.

Read more about .stopImmediatePropagation()