1.1.4 • Published 2 years ago
toggletree v1.1.4
ToggleTree
ToggleTree makes ul > li > ul
stuctures collapsible by adding click events.
Installation
$ npm install toggletree
Quick start
Consider the following html
structure
<nav>
<ul>
<li name="projects">
<a href="#"><span class="material-icons">arrow_drop_down</span> Projects</a>
<ul>
<li><a href="#">Little PHP Framework</a></li>
<li><a href="#">Checkify</a></li>
<li><a href="#">Cabhair</a></li>
</ul>
</li>
<li name="articles">
<a href="#"><span class="material-icons">arrow_drop_down</span> Articles</a>
<ul>
<li><a href="#">Clean Code Confusion</a></li>
<li><a href="#">Developers High</a></li>
</ul>
</li>
</ul>
</nav>
As you see there's a ul > li > ul
structure here, wrapped inside a nav
element. To make this into a ToggleTree implement the following code.
import { ToggleTree } from "toggletree";
const parent = document.querySelector('nav');
const toggletree = new ToggleTree(parent);
API
toggle(listItem)
Toggle the child ul
element
toggletree.toggle(document.querySelector('li[name=projects]'));
show(listItem)
Show the child ul
element
toggletree.show(document.querySelector('li[name=projects]'));
showAll()
Show all ul
child elements
toggletree.showAll();
collapse(listItem)
Collapse the child ul
element
toggletree.collapse(document.querySelector('li[name=projects]'));
collapseAll()
Collapse all ul
child elements
toggletree.collapseAll();