JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="https://dl.dropbox.com/s/hxh6teytrjoo222/toggle-icon.png"></script>
<script src="https://dl.dropboxusercontent.com/s/t2ywui846zp58ye/plus_minus_icons.png"></script>
<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 data-role="page" id="home">


<div data-role="panel" id="mypanel" data-position="left" data-display="push" data-dismissible="true" data-theme="a" >    <!-- panel content goes here -->
    <!--label class="testSuiteId">Test Suite</label-->
<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-be-a">b-b-a
                        <ul>
                        <li id="b-b-aeee">b-b-a
                            <ul>
                        <li id="b-b-a">b-b-a</li>
                        <li id="b-b-b">b-b-b</li>
                    </ul>
                            </li>
                        <li id="b-b-beee">b-b-b</li>
                    </ul>
                        </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>



</div>
<!-- /panel -->
<div data-role="header" data-theme="b">
    <img href="#mypanel" border="0" src="https://dl.dropboxusercontent.com/s/hxh6teytrjoo222/toggle-icon.png" style="float:left;display:inline;margin-top:2%" id="panelOpenImge" />

    <h1 style="position: relative;left:...

CSS

#mypanel {
    width: 200px;
    border: 1px solid #000;
    border-right: none;
    background: rgba(0,0,0,.5);
    margin: -1px 0;
}
.ui-panel{
    min-height:100px !important;
    max-height: 100px !important;
    min-width:100px !important;
    max-width: 100px !important;
    overflow-y:scroll;
     overflow-x:scroll;
}

JavaScript

$(function () {   
$('#panelOpenImge').click(function(){

        $( "#mypanel" ).panel( "open"  );

    })
    })

$(document).ready(function() {
    
    
$('#tree').on("select_node.jstree", function (e, data) { 
    alert("node_children: " + data.node.children);
    $('#tree').jstree(true).toggle_node(data.node); 
                                                       
    var selEl = [];
    $(this).siblings().each(function (idx, el) {
        selEl.push($(el.node).attr("id"));
    });
    console.log(selEl);                                                       
                                                       });  
$('#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')
   alert( 'Checked Item -: ' + $('.jstree-clicked').text()  );
    });
    
$('#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()]));
}
});
});