Toggle entire jQuery jstree

Question

Is it possible to open and close the entire tree through a button?

I know that in order to open all the nodes and subnodes of the tree, I have to call the open_all function like : $("#tree").jstree('open_all');

And in order to toggle a node : $("#tree").jstree("toggle_node","#1"); where #1 is the id of the first child.

But the toggle function does not expand all the subnodes of the node. Nor does it open a half-opened tree. I can call open_all and close_all on button click, but how do I find which method to call, as in figure out if the tree has to be opened or closed?

Solution 1

Pass -1 for the entire tree:

$("#tree").jstree("open_all", -1);

To close all you can use the close_all function:

$("#tree").jstree("close_all", -1);

You can also use save_opened to remember which nodes are opened and then reopen them later with the reopen function.

Look at the documentation.

Solution 2

function toggle(){
    var open=true;
    $(".jstree").jstree().on('loaded.jstree', function () {
         if(open){
              $(".jstree").jstree('close_all');
         }else{
              $(".jstree").jstree('close_all');
         }    
         open=!open; 
    });
}

Solution 3

$("#treepanel").jstree("open_node", $('li[id="' + nodeId + '"]'), function() {
   alert("node is added")
});

try this

Solution 4

<img onclick="jstreeToggleState()" src='toggle-image.jpg'></img>

  <script>
   var isTreeOpen = false;

   function jstreeToggleState() {

        if(isTreeOpen){
              $(".jstree").jstree('close_all');
         }else{
              $(".jstree").jstree('open_all');
         }    
         isTreeOpen =! isTreeOpen; 
  }
</script>

Solution 5

I've used open_node and passed the identifier for the root node to expand all children. It works fine for me.

$('#tree').jstree('open_node', '#root');

View more solutions