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.
expandSidebar	Boolean	FALSE	Whether to expand sidebar on open menu.
sidebarButtonSelector	String	`[data-widget="pushmenu"]`	Selector of the sidebar button.

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)