Hide sections Click Dynatree value

Question

Create a tree structure as follows

Section 1 item1 item2 Section 2 item5 

I can click on any element and hide all other elements using the dynatree onActivate function and this code

  onActivate: function(node) { var resultId = "#" + node.data.title; resultId = resultId.replace(/\s/g, ''); $('#contents>div').not(resultId).hide(); $(resultId).show(); }, 

My html is

 <div class="container-fluid text-left"> <div class="row content"> <div class="col-sm-2 sidenav" id="tree"> </div> <div class="col-sm-8" id="contents"> <div id="item1"> <table id="item1grid"></table> </div> <div id="item2"> <table id="item2grid"></table> </div> <div id="item5"> <table id="item5grid"></table> </div> </div> <div id="info"> </div> </div> </div> </div> 

How can I extend this html and function, so if I click "Section 1" in the tree, it will display all the elements in this section, only if I click "Section 1" shows only points 1 and 2

Answer 1

Perhaps you can achieve this by using some of the properties of the incoming onActivate callback node object. You need to check that the activated object is a folder, and if so, display all the elements of this element. Try adding this snippet inside your onActivate callback:

 if (node.data.isFolder) { for (var i = 0; i < node.childList.length; i++) { $('#' + node.childList[i].data.key).show(); } } 

Do not delete the entire object using console.log and check which fields you can use.

Could you provide jsfiddle to check what you have?