CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstraptree
Arctic Tern
Arctic Tern

Reputation: 64

Collapsing only the top level in CSS tree

In my template, I have used the same tree structure code as used in this question. The answer to that question opens the page up with the tree entirely collapsed (jsfiddle).

However, I would like to implement this such that when first opening the page all the top level directories of the tree are collapsed (in the top example the Parent folders), but clicking on one of the top level directories will fully open up all the child branches. Right now it will only open one level down. I would appreciate any help with accomplishing this.

Current Javascript for tree is below.

$(function () {
    $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
    $('.tree li ul > li').hide();
    $('.tree li.parent_li > span').on('click', function (e) {
        var children = $(this).parent('li.parent_li').find(' > ul > li');
        if (children.is(":visible")) {
            children.hide('fast');
            $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
        } else {
            children.show('fast');
            $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
        }
        e.stopPropagation();
    });
});

Upvotes: 0

Views: 146

Answers (1)

Sushanth --
Sushanth --

Reputation: 55750

Try changing 

var children = $(this).parent('li.parent_li').find(' > ul > li');

to 

var children = $(this).parent('li.parent_li').find('li');

Upvotes: 2

Related Questions