jstree Example - Simple

by eorozco

HTML

<script src="http://static.jstree.com/3.0.0-beta3/assets/dist/jstree.min.js"></script>
<link rel="stylesheet" href="http://static.jstree.com/3.0.0-beta3/assets/dist/themes/default/style.min.css">
<div class="container">
<div id="jstree">
    <ul>
        <li>Folder 1
            <ul>
               <li id="child_1">Child 1
                    <ul>
                       <li id="child_3">Child 3
                            <ul>
                               <li id="child_5">Child 5
                                    <ul>
                                       <li id="child_7">Child 7</li>
                                       <li>Child 8</li>
                                    </ul>
                                </li>
                               <li>Child 6</li>
                            </ul>
                        </li>
                       <li>Child 4</li>
                    </ul>
                </li>
               <li>Child 2</li>
            </ul>
        </li>
        <li>Folder 2</li>
    </ul>
</div>
</div>

CSS

.container {
    position: absolute;
    border: 1px black solid;
    min-width: 150px;
    min-height: 100px;
    overflow: auto;
}

JavaScript

$(function () {
    $('#jstree').jstree();

});