Hide Sections Clicking Dynatree Value

Question

Have a tree structure like the following

Section 1
item1
item2
Section 2
item5

I can click on any item and hide all the other items with 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 this

<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 shows all the items in that section only i.e. clicking "Section 1" only shows item1 and item2

Answer 1

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

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

Feel free to dump the entire object with console.log and check which fields you're able to use.

Could you please provide a jsfiddle to check what you're having so far?