Arctic Tern Arctic Tern - 2 months ago 3
HTML Question

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 (":visible")) {
$(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
} else {'fast');
$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');


Try changing

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


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