jsTree - display on click
by gurkavcu
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.0.0-beta10/themes/default/style.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.0.0-beta10/jstree.min.js"></script>
<div id="treeView"></div>
CSS
[rel=directory] > a > .jstree-checkbox { display:none }
[rel=disabled] .jstree-checkbox { visibility:hidden }
JavaScript
$(document).ready(function() {
$("#treeView").jstree({
"themes": {
"theme": "default",
"dots": false,
"icons": false
},
"json_data": {
"data": [
{
"data": "2011",
"metadata": {
id: 2011
},
"children": [
{
"data": "January",
"attr": {
"id": "jan_2011"
}},
{
"data": "February",
"attr": {
"id": "feb_2011"
}},
{
"data": "March",
"attr": {
"id": "mar_2011"
}},
{
"data": "April",
"attr": {
"id": "apr_2011"
}},
{
"data": "May",
"attr": {
"id": "may_2011"
}},
{
"data": "June",
"attr": {
"id": "jun_2011"
}},
{
"data": "July",
"attr": {
"id": "jul_2011"
}},
{
"data": "August",
"attr": {
"id": "aug_2011"
}},
{
"data": "September",
"attr": {
"id": "sep_2011"
}},
{
"data": "October",
"attr": {
"id": "oct_2011"
}},
{
"data": "November",
"attr": {
...