Within my template, I have utilized the same tree structure code that was referenced in a previous question found at this link. The solution provided in that question initializes the page with the entire tree collapsed (view jsfiddle).
My goal is to modify this so that upon first opening the page, all main directories of the tree (similar to the Parent folders in the example) remain collapsed. However, clicking on any top-level directory should expand all child branches completely, rather than only revealing one level down as it currently does. Any assistance in achieving this would be greatly appreciated.
The existing Javascript for the tree can be seen 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();
});
});