Treeview Plugin

The Treeview plugin converts a nested list into a tree view where sub menus can be expanded.

Usage

This plugin can be activated as a jQuery plugin or using the data api.

Data API

Add data-widget="treeview" to any ul or ol element to activate the plugin.

<ul data-widget="treeview">
  <li><a href="#">One Level</a></li>
  <li class="treeview">
    <a href="#">Multilevel</a>
    <ul class="treeview-menu">
      <li><a href="#">Level 2</a></li>
    </ul>
  </li>
</ul>
jQuery
$('ul').Treeview(options)
Options
Name Type Default Description
animationSpeed Number  300 Speed of slide down/up animation in milliseconds.
accordion Boolean  TRUE Whether to collapse the open menu when expanding another.
trigger String  [data-widget="treeview"] .nav-link Selector of the element that should respond to the click and result in expanding or collapsing it sibling sub menu.
Tip!

You can use any option via the data-attributes like this.

<ul data-widget="treeview" data-accordion="false">...</ul>
Events
Event Type  Description
expanded.lte.treeview Triggered after a sub menu expands.
collapsed.lte.treeview Triggered after a sub menu collapses.
load.lte.treeview Triggered after the plugin initialized via data api.

Example: $('ul').on('expanded.lte.treeview', handleExpandedEvent)