jstree Example - Simple

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 id="jstree">
  <ul>
    <li>Folder 1
      <ul>
        <li id="child_1">Child 1</li>
        <li>Child 2
          <ul>
            <li>Folder 1
              <ul>
                <li id="child_1">Child 1</li>
                <li>Child 2</li>
              </ul>
            </li>
            <li>Folder 2
              <ul>
                <li>Folder 1
                  <ul>
                    <li id="child_1">Child 1</li>
                    <li>Child 2</li>
                  </ul>
                </li>
                <li>Folder 2
                  <ul>
                    <li>Folder 1
                      <ul>
                        <li id="child_1">Child 1</li>
                        <li>Child 2</li>
                      </ul>
                    </li>
                    <li>Folder 2</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Folder 2</li>
  </ul>
  <ul>
    <li>Folder 1
      <ul>
        <li id="child_1">Child 1</li>
        <li>Child 2</li>
      </ul>
    </li>
    <li>Folder 2</li>
  </ul>
  <ul>
    <li>Folder 1
      <ul>
        <li id="child_1">Child 1</li>
        <li>Child 2</li>
      </ul>
    </li>
    <li>Folder 2</li>
  </ul>

</div>

CSS

#jstree .glyphicon {
  color: red;
  font-size: 2px;
}

.jstree-default .jstree-node, .jstree-default .jstree-icon,
.jstree-node.jstree-open .jstree-icon.jstree-ocl{
    background-image: none;
}

JavaScript

$(function() {
  $('#jstree').jstree();
  $('.jstree-node.jstree-closed').find('.jstree-icon.jstree-ocl').css('background-image', 'none').addClass('glyphicon glyphicon-chevron-right	');
  $('.jstree-node.jstree-open').find('.jstree-icon.jstree-ocl').css('background-image', 'none').addClass('glyphicon glyphicon-chevron-down');

  $('.jsstree-icon.jstree-ocl').click(function() {
  setTimeout(function(){ 
    $('.jstree-node.jstree-closed').find('.jstree-icon.jstree-ocl').css('background-image', 'none').addClass('glyphicon glyphicon-chevron-right	');
    $('.jstree-node.jstree-open').find('.jstree-icon.jstree-ocl').css('background-image', 'none').addClass('glyphicon glyphicon-chevron-down');
  }, 200);
  });
 

});