jQuery FancyTree Demo

HTML

<link rel="stylesheet" href="//github.com/mar10/fancytree/skin-win8/ui.fancytree.min.css">
<script src="//github.com/mar10/fancytree/jquery.fancytree-all.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
  <!-- Define where the tree should appear -->
 <div id="tree">
    <ul id="treeData" style="display: none;">
      <li id="id1" title="Look, a tool tip!">item1 with key and tooltip
      <li id="id2">item2
      <li id="id3" class="folder">Folder <em>with some</em> children
        <ul>
            <li id="id3.1">Sub-item 3.1</li>
            <ul>
              <li id="id3.1.1">Sub-item 3.1.1</li>
              <li id="id3.1.2">Sub-item 3.1.2</li>
            </ul>
          <li id="id3.2">Sub-item 3.2</li>
            <ul>
              <li id="id3.2.1">Sub-item 3.2.1</li>
              <li id="id3.2.2">Sub-item 3.2.2</li>
            </ul>
        </ul>
      <li id="id4" class="expanded">Document with some children (expanded on init)</li>
        <ul>
          <li id="id4.1"  class="active focused">Sub-item 4.1 </li>
            <ul>
              <li id="id4.1.1">Sub-item 4.1.1</li>
              <li id="id4.1.2">Sub-item 4.1.2</li>
            </ul>
          <li id="id4.2">Sub-item 4.2</li>
            <ul>
              <li id="id4.2.1">Sub-item 4.2.1</li>
              <li id="id4.2.2">Sub-item 4.2.2</li>
            </ul>
        </ul>
    </ul>
  </div>

JavaScript

// Create the tree inside the <div id="tree"> element.
        debugger;
      $("#tree").fancytree();