Collapsing nested lists in a hiearchy-structure with jQuery

Question

I have a very annoying problem, which might be a product of my poor knowledge of javascript and jQuery.

I have a list that uses recursion to enable a hierarchy-structure, it looks as follows

$(function (){
    $('#foo').click(function() {
        $(this).children('ul').slideToggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li id='foo'>A
        <ul>
            <li id='foo'>B
                <ul>
                    <li>
                        Sub-sub
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

I'm trying to accomplish a collapse function, so that when the user clicks on 'A' all the children elements collapses, and if she clicks the 'B' node all of 'B's children collapses. But however I try I always end up having all of the lists with id = 'foo' collapsing.

In my eyes, $(this).children('ul').slideToggle(); will collapse the children, since $(this) points to the list element clicked...?

Been at this for far to long now, would love some help!

`id`s _must be unique_ within the document. Use `class` instead. — Teemu, Sep 22 '14 at 07:09
related: https://stackoverflow.com/questions/31508500/dead-simple-collapsable-list-function-for-deep-and-shallow-nested-ul-li-lists-j — Ciro Santilli OurBigBook.com, Jul 24 '19 at 21:57

score 0 · Answer 1 · answered Sep 22 '14 at 07:26

Here you go... No change in HTML. But like other suggested, you need to have unique ID's

$(function (){
    $('li').click(function(event) {
        event.stopPropagation();
    $(event.target).children('ul').slideToggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li id='foo'>A
        <ul>
            <li id='foo'>B
                <ul>
                    <li>
                        Sub-sub
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Collapsing nested lists in a hiearchy-structure with jQuery

1 Answers1