Lightweight File/Folder Tree Plugin with jQuery - Orange Tree

File Size: 37.7 KB
Views Total: 8023
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//">

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

<script src="//"></script>
<script src="orange-tree.js"></script>

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

<div id="container">


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

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

  folder: true,
  title: "folder1"
  path: "1"
  path: "1",
  folder: true
  path: "1/3"

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

.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.