Generate A Hierarchical Tree From Staitc Elements - jQuery dataTree

The dataTree jQuery plugin lets you generate an expandable/collapsible hierarchical tree from a group of any HTML elements.

How to use it:

1. To use this plugin, load the jquery.dataTree.min.js library after jQuery library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="src/jquery.dataTree.min.js"></script>

2. The html structure.

<ul id="tree">
  <li data-tree-branch="1"><span data-tree-click="1">1</span> - Chapter 1</li>
  <li data-tree-branch="1.1"><span data-tree-click="1.1">1.1</span> - Chapter 1, Subchapter 1</li>
  <li data-tree-branch="1.1.1"><span data-tree-click="1.1.1">1.1.1</span> - Chapter 1, Subchapter 1, Page 1</li>
  <li data-tree-branch="1.1.2"><span data-tree-click="1.1.2">1.1.2</span> - Chapter 1, Subchapter 1, Page 2</li>
  <li data-tree-branch="1.1.2.1"><span data-tree-click="1.1.2.1">1.1.2.1</span> - Chapter 1, Subchapter 1, Page 2, Paragraph 1</li>
  <li data-tree-branch="1.2"><span data-tree-click="1.2">1.2</span> - Chapter 1, Subchapter 2</li>
  <li data-tree-branch="1.3"><span data-tree-click="1.3">1.3</span> - Chapter 1, Subchapter 3</li>
  <li data-tree-branch="1.3.1"><span data-tree-click="1.3.1">1.3.1</span> - Chapter 1, Subchapter 3, Page 1</li>
  <li data-tree-branch="2"><span data-tree-click="2">2</span> - Chapter 2</li>
  <li data-tree-branch="2.1"><span data-tree-click="2.1">2.1</span> - Chapter 2, Subchapter 1</li>
  <li data-tree-branch="2.2"><span data-tree-click="2.2">2.2</span> - Chapter 2, Subchapter 2</li>
  <li data-tree-branch="2.2.1"><span data-tree-click="2.2.1">2.2.1</span> - Chapter 2, Subchapter 2, Page 1</li>
  <li data-tree-branch="2.2.2"><span data-tree-click="2.2.2">2.2.2</span> - Chapter 2, Subchapter 2, Page 2</li>
  <li data-tree-branch="2.3"><span data-tree-click="2.3">2.3</span> - Chapter 2, Subchapter 3</li>
  <li data-tree-branch="3"><span data-tree-click="3">3</span> - Chapter 3</li>
</ul>

3. Initialize the dataTree plugin to generate a basic tree.

$(function(){
  $('#tree').dataTree();
});

4. The example CSS to style the tree.

#tree {
  list-style-type:none;
  color: #666666;
}

#tree [data-tree-click] {
  cursor: pointer;
  color: #999999;
  font-weight: bold;
  font-size: 1.2em;
}

#tree .closed [data-tree-click]{
  padding-left: 12px;
  background-image: url('src/plus_minus.gif');
  background-repeat: no-repeat;
  background-position: 0px 6px;
  color: #FF00000 !important;
}

#tree .open [data-tree-click]{
  padding-left: 12px;
  background-image: url('src/plus_minus.gif');
  background-repeat: no-repeat;
  background-position: 0px -94px;
  color: #FF00000 !important;
}

#tree .end {
  padding-left: 12px;
  color: #BBBBBB;
}

#tree .data-tree-level1 {
  margin-left: 10px;
}

#tree .data-tree-level2 {
  margin-left: 20px;
}

#tree .data-tree-level3 {
  margin-left: 30px;
}

5. Customize the delimiter.

$(function(){
  $('#tree').dataTree({
    delimeter: "."
  });
});

6. Define an array of nodes to be opened on page load.

$(function(){
  $('#tree').dataTree({
    opened: ['1.1.1', '2.2.2']
  });
});

7. Default CSS selectors.

$(function(){
  $('#tree').dataTree({
    openCSS: "open",
    closedCSS: "closed",
    endCSS: "end"
  });
});

---

This awesome jQuery plugin is developed by gar-cad. For more Advanced Usages, please check the demo page or visit the official website.