Smooth Collapsible Tree View Plugin with jQuery - TreeViewJS

File Size: 6.29 KB
Views Total: 16328
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Smooth Collapsible Tree View Plugin with jQuery - TreeViewJS

TreeViewJS is a jQuery plugin that takes data from a big nested list or JSON strings and presents them in an expanding and collapsing tree view.

Basic usage:

1. Include the jQuery TreeViewJS plugin after jQuery library.

<script src="jquery.min.js"></script>
<script src="jquery.treeView.js"></script>

2. Create a nested list for the tree view.

<ul class="treeview">
  <li> item 1
      <li>subitem 1</li>
      <li>subitem 2</li>
  <li>Foo Item</li>
  <li> Countries
      <li>United States
          <li>New York</li>
          <li>San Francisco</li>
          <li>Los Angeles</li>
      <li>United Kingdom</li>
          <li>New Delhi</li>

3. Initialize the tree view plugin and done.


4. Present your JSON data in the tree view.

<code id="treeModel">

<ul class="treeview" id="dataTree"></ul>

// load the data tree
var $dataTree = $('#dataTree');
var model = JSON.parse($('#treeModel').html());

5. Style the tree view.

.treeview ul {
  list-style-type: none;
  overflow: hidden;

.treeview li {
  text-indent: 1%;
  margin-top: 0.2em;
  padding: 0.15em 0 0.5em 1.5em;
  line-height: 22px;
  background-repeat: no-repeat;
  background-size: 24px 24px;

.treeview li.contains-items { background-image: url('icons/arrow-left.png'); }

.treeview li.items-expanded { background-image: url('icons/arrow-down.png'); }

.treeview>li:hover { cursor: pointer; }

.treeview span:hover { background-color: rgba(246, 246, 246, 0.7); }

6. Functions.

// Expands all the nodes of treeviews

// Collapses all the nodes of treeviews

7. Default options.

// treeview data model
model: null, 

// use <span> to build model
useSpan: false, 

// add icons to nodes
imageList: [], 

// the tree is expanded
expanded: false 



  • Add more configuration options namely, model, useSpan, imageList and expanded
  • TreeNode icons
  • Fixed model buliding bug


  • Fix scroll on small screens
  • More configurable editor

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