How do I open all nodes in jquery Jstree?

Question

I am using the following code:

$("#treeview").jstree();
$("#treeview").jstree(\'open_all\');

With the following html:

Answer 1

When using html data 'you can set the jstree-open class on any <li> element to make it initially extended, so that its children are visible.' - https://www.jstree.com/docs/html/

<li class="jstree-open" id="node_1">My Open Node</li>

Answer 2

I am using version 3 of jstree and Chrome. The loaded event did not work for me, but the ready event did, even after the jstree instance was created:

$('#treeview').on('ready.jstree', function() {
    $("#treeview").jstree("open_all");          
});

http://www.jstree.com/api/#/?q=.jstree%20Event&f=ready.jstree

Answer 3

.bind("loaded.jstree", function (event, data) {
        // you get two params - event & data - check the core docs for a detailed description
        $(this).jstree("open_all");
    }) 

Answer 4

all the answers above not work in my workspace. I searched again and find this link(Why doesn't jsTree open_all() work for me?) is helpful, and post my answer:

jstree version: 3.0.0-bata10

$(document).ready(function() {
  $("#tree").bind("loaded.jstree", function(event, data) { 
    data.instance.open_all();
  });
  $("#tree").jstree();
})

Answer 5

If you want open all node when tree loaded:

$("#treeview")
    // call `.jstree` with the options object
    .jstree({
        "plugins" : ["themes", "html_data","ui","crrm","sort"]
    }) 
    .bind("loaded.jstree", function (event, data) {
        // you get two params - event & data - check the core docs for a detailed description
        $(this).jstree("open_all");
    })      
});

Answer 6

You can also apply animation to the opening and closing like so:

$(document)
    .on("click", "#open-all-folders", function () {
        // param1 set to null to open/close all nodes
        // param2 is the duration in milliseconds
        $("#tree-ref").jstree().open_all(null, 200);
    })
    .on("click", "#close-all-folders", function () {
        $("#tree-ref").jstree().close_all(null, 200);
    });

(or similarly apply to .on('ready.jstree', function() { // code here } );