CODEWITHSUNDEEP
jqueryhtml
peace_love
peace_love

Reputation: 6461

How can I collapse a nested ul list?

I have an ul list, that toggles if I click on an item that has other items inside:

<ul>
    <li><a href "#">Hello World</a>

        <ul>
            <li><a href "#">Hello World</a>

            </li>
            <li><a href "#">Hello World</a>

                <ul>
                    <li><a href "#">Hello World</a>

                    </li>
                    <li><a href "#">Hello World</a>

                    </li>
                </ul>
            </li>
            <li><a href "#">Hello World</a>

            </li>
        </ul>
    </li>
    <li><a href "#">Hello World</a>

    </li>
    <li><a href "#">Hello World</a>

    </li>
    <li><a href "#">Hello World</a>

    </li>
</ul>

This is the script:

$('li a').click(function (e) {
    e.preventDefault();
    var ullist = $(this).parent().children('ul:first');
    ullist.slideToggle();
});

Here is the fiddle

I would like that on pageload all "folders" are closed.

I tried to do it like this:

$(window).load(function(){
    var ullist = $('li a').parent().children('ul:first');
    ullist.hide();
    $('li a').click(function (e) {
        e.preventDefault();
        var ullist = $(this).parent().children('ul:first');
        ullist.slideToggle();
    });
});

but then only the main "folder" is closed and when I click on it, all the other folders are open.

Upvotes: 0

Views: 484

Answers (2)

Voinea Ionut
Voinea Ionut

Reputation: 72

To collapse all lists you can use $('ul ul').hide() on document ready:

Upvotes: 1

peace_love
peace_love

Reputation: 6461

I have the result! Need to change var ullist = $('li a').parent().children('ul:first'); into var ullist = $('li a').parent().children('ul');

Upvotes: 0

Related Questions