0

I created a dynamic menu using jstree plugin, here my problem is to toggle the menu when we click on parent1 then the sub child will get opened and when i click on parent2 ie node two then i want to close the parent1. How to implement this.

node1
    sub1
    sub2parent
          sub1
          sub2
          sub3
    sub3

node2
   sub1
   sub2
   sub3

here when i click on node one all sub are visible. when i click on node 2 then the node1 sub nodes and note2 sub nodes are visible

what i need is when i click on node2 then node1 should get closed.

vijay kumar
  • 287
  • 2
  • 8
  • 28

1 Answers1

0

You can listen to before_open event and close all that are expanded by that moment.
Check demo - Fiddle Demo

.on("before_open.jstree", function(e, data) {
   $('#tree').jstree().close_all();
});
Nikolay Ermakov
  • 5,031
  • 2
  • 11
  • 18
  • this is working for one level but if there are multiple levels then it is not working all the main prent is getting closed when i click on sub parent which have more links. – vijay kumar Feb 27 '17 at 08:04
  • So when you open a node what do you want to close ? – Nikolay Ermakov Feb 27 '17 at 12:45
  • I got my requirment i used – vijay kumar Feb 28 '17 at 05:09
  • .on("before_open.jstree", function(e, data) { var nodesToKeepOpen = []; // get all parent nodes to keep open $('#'+data.node.id).parents('.jstree-node').each(function() { nodesToKeepOpen.push(this.id); }); // add current node to keep open nodesToKeepOpen.push( data.node.id ); // close all other nodes $('.jstree-node').each( function() { if( nodesToKeepOpen.indexOf(this.id) === -1 ) { $("#tree").jstree().close_node(this.id); } }) – vijay kumar Feb 28 '17 at 05:09