It's easy to specify what the icon should be for a closed folder using the "types" plugin. But can the types plugin also be used to specify what an open folder should look like, or can I only do this with CSS (like below) ?
li.jstree-open > a .jstree-icon
{
background:url("folder_open.png") 0px 0px no-repeat !important;
}
A possible solution is to have two type
s - one for an open folder, and one for a closed folder. Changing the node type
is easy.
From another answer of mine:
<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>