Lightweight File/Folder Tree Plugin with jQuery - Orange Tree

Orange Tree is a simple lightweight jQuery tree view plugin helps you create an expandable/collapsible folder/file tree structure.

How to use it:

1. Load the required Font Awesome 4 for folder/file icons.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

2. Load the jQuery Orange Tree plugin after jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="orange-tree.js"></script>

3. Create a container to place the folder/file tree.

<div id="container">

</div>

4. Add items to the tree view and initialize the plugin.

var tree = new orangeTree("#container");

tree.addBranch({
  folder: true,
  title: "folder1"
});
tree.addBranch({
  path: "1"
});
tree.addBranch({
  path: "1",
  folder: true
});
tree.addBranch({
  path: "1/3"
});

5. A little CSS to tweak the tree view styles.

.tree,
.tree ul {
  list-style-type: none;
  -webkit-padding-start: 10px !important;
}

.tree li {
  font-size: 13px;
  margin-top: 7px;
  margin-bottom: 7px;
  overflow-wrap: break-word;
}

.tree li>span:first-child { margin-right: 10px; }

---

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