Toggle entire jQuery jstree

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

I know that in o开发者_JAVA技巧rder 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?

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.

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

try this

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

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');

<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>

piggybacking on @بهنام محمدی answer This will toggle open and closed on a button as follows:

<button class="product-expand" onclick="toggle()">Toggle Open/Close</button>

var open = false;
function toggle(){
   if(open){
    $("#prodtree").jstree('close_all');
    open = false;
   }
   else{
    $("#prodtree").jstree('open_all');
    open = true;
   }
}

.jstree({
    "core": {
        'data': jsondata,
        **expand_selected_onload: true**
    },
    "plugins": ["checkbox"]
})