Jstree click change icon

Question

I have this code using jstree plugin.

$(".gems-tree").on('changed.jstree' , function( event , data ){ console.log("folder clicked"); }); 

And it works, but now I want to change the icon from the folder to close it, to open this file?

NOTE

Try using data.node.state.opened = true just see if the folder icon changes, but no.

Answer 1

If you need to change the icon of each selected node, Adnan Y's answer will work (just make sure data.action is "select_node" ):

 $("#jstree2").on('changed.jstree', function(evt, data) { if(data.action === "select_node") { data.instance.set_icon(data.node, 'http://jstree.com/tree-icon.png'); } }); 

If you need to respond to opening and closing nodes, use a similar code:

 $("#jstree2") .on('open_node.jstree', function(evt, data) { data.instance.set_icon(data.node, 'http://jstree.com/tree-icon.png'); }) .on('close_node.jstree', function(evt, data) { data.instance.set_icon(data.node, true); }); 

In the second example, the icon is true - this will restore it to the default icon (if that is what you need).

Answer 2

 $("#jstree2").on('changed.jstree', function(evt, data){ $("#jstree2").jstree(true).set_icon(data.node, 'http://jstree.com/tree-icon.png') }) 

Answer 3

This can be done using the jstree types plugin.

Here is an example using font-awesome for folder icons.

 <div id="jstree_menu"></div> <script> /* Load menu tree data */ $('#jstree_menu').jstree( { 'core' : { 'data' : { 'url' : '/jstree-menu-data/index.html', } }, 'plugins' : [ "types" ], 'types' : { 'default' : { 'icon' : 'fa fa-angle-right fa-fw' }, 'f-open' : { 'icon' : 'fa fa-folder-open fa-fw' }, 'f-closed' : { 'icon' : 'fa fa-folder fa-fw' } } } ); /* Toggle between folder open and folder closed */ $("#jstree_menu").on('open_node.jstree', function (event, data) { data.instance.set_type(data.node,'f-open'); }); $("#jstree_menu").on('close_node.jstree', function (event, data) { data.instance.set_type(data.node,'f-closed'); }); </script>