JSFiddle - React, Tailwind, and code Playground

by Rohan Kumar

HTML

<script src="http://static.jstree.com/3.0.0/assets/dist/jstree.min.js"></script>
<link rel="stylesheet" href="http://static.jstree.com/3.0.0/assets/dist/themes/default/style.min.css">
<div id="tree">
    <ul>
        <li id="a">a</li>
        <li id="b">b
            <ul>
                <li id="b-a-1">b-a</li>
                <li id="b-b-2">b-b
                    <ul>
                        <li id="b-b-a">b-b-a</li>
                        <li id="b-b-b">b-b-b</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li id="c-1">c
            <ul>
                <li id="c-a-1">c-a</li>
                <li id="c-b-2">b-b</ul>
            </li>
    </ul>
</div>
<button id="child">child</button>
<button id="onelvel">open level up</button>
<button id="next">next</button>
<button id="pre">pre</button>

JavaScript

$(document).ready(function () {


    $('#tree').on("select_node.jstree", function (e, data) {
        alert("node_children: " + data.node.children);
        $('#tree').jstree(true).toggle_node(data.node);


    });
    $('#tree').jstree({
        "core": {
            "check_callback": true
        },
            "plugins": ["dnd"]
    });

    $('#next').click(function () {
        if ($('.jstree-clicked').closest('li').next().length) $('.jstree-clicked').removeClass('jstree-clicked').closest('li').next().find('a:eq(0)').addClass('jstree-clicked')

    });
    $('#pre').click(function () {
        if ($('.jstree-clicked').closest('li').prev().length) $('.jstree-clicked').removeClass('jstree-clicked').closest('li').prev().find('a:eq(0)').addClass('jstree-clicked')

    });

    $('#onelvel').click(function () {
        if($('.jstree-clicked').length){
            if($('.jstree-clicked').next('.jstree-children').length){
                $('.jstree-clicked').click();
            } else {
                $('.jstree-clicked').closest('.jstree-children').prev('.jstree-anchor').click().addClass('jstree-clicked');
            }         
        }
    });

    $('#child').click(function () {
        $('#tree').jstree(true).select_node('b')
        for (i in $('#tree').jstree(true).get_node('b').children) {
            alert($('#tree').jstree(true).get_text($('#tree').jstree(true).get_node('b').children[i.toString()]));
        }
    });
});