Semantic Tree View Plugin With jQuery - Simple Tree

File Size: 15.2 KB
Views Total: 5953
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Semantic Tree View Plugin With jQuery - Simple Tree

A simple, SEO-friendly jQuery tree plugin which converts nested HTML lists into a collapsible and expandable tree structure. Ideal for representing your folders, files, menu items as a hierarchical tree.

More features:

  • Custom collapse all & expand all buttons.
  • Auto saves the current state using localStorage or sessionStorge.

How to use it:

1. Install & download.

$ npm install @kanety/jquery-simple-tree --save

2. Link to jQuery library and the jQuery simple tree plugin's files.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="dist/jquery-simple-tree.js"></script>

3. Add node ID to list items using the data-node-id attribute:

<ul id="basic">
  <li data-node-id="1">
      <li data-node-id="1.1">
          <li data-node-id="1.1.1">
          <li data-node-id="1.1.2">
      <li data-node-id="1.2">
          <li data-node-id="1.2.1">
          <li data-node-id="1.2.2">
  <li data-node-id="2">
      <li data-node-id="2.1">
      <li data-node-id="2.2">

4. Call the plugin to initialize the tree.


5. Expand/collapse all nodes using toggle buttons:

<button type="button" id="expander">expand</button>
<button type="button" id="collapser">collapse</button>
  expander: $('#expander'),
  collapser: $('#collapser')

6. Determine whether to save the current open/close states using localStorage or sessionStorge.

  storeState: true,
  storeType: 'session' // or 'local'

7. Specify the nodes to open on init. Default: all.

  opened: [1, 1.1]

8. Get the opened/closed nodes.

$('#basic').simpleTree().on('node:open', function(e, $node) {
  var nodeID = $'node-id');
  $('#message').append("opened " + nodeID + " ");
  if ($'node-lazy')) {
    $'node-lazy', false);
    var newID = nodeID + '.1';
    var loaded = '<ul><li data-node-id="' + newID + '" data-node-lazy="true"><span>' + newID + '</span></li></ul>';
}).on('node:close', function(e, $node) {
  var nodeID = $'node-id');
  $('#message').append("closed " + nodeID + " ");


v0.5.0 (2020-09-22)

  • Add flag to keep node opened

v0.4.0 (2019-11-08)

  • Support focus movement by keyboard.
  • Change default icon template from span tag to a tag.

v0.3.0 (2019-10-21)

  • Fix css class name.
  • Bundle css with js.

v0.2.1 (2019-10-05)

  • Fix jquery deprecated selector

v0.2.0 (2019-07-17)

  • Separate store class and change store options.
  • Destroy existing instance on initialization.
  • Change event hanlder class.
  • Tweak css.

v0.1.1 (2019-05-22)

  • Treat li without data-node-id as node.
  • Tweak css style.


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