# toggletree

> A simple ul tree toggler

Latest version **1.1.4** (published 2022-07-01) · ISC license · 0 weekly downloads

## Install

```sh
npm install toggletree
pnpm add toggletree
yarn add toggletree
bun add toggletree
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.4 |
| Published | 2022-07-01 |
| First published | 2022-04-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 4.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Rik Verbeek |
| Maintainers | rikverbeek |

## Links

- npm: https://www.npmjs.com/package/toggletree
- Repository: https://github.com/rvrbk/toggletree
- Homepage: https://github.com/rvrbk/toggletree#readme
- Issues: https://github.com/rvrbk/toggletree/issues
- npm.io page: https://npm.io/package/toggletree

## Recent versions

- 1.1.4 (latest) — 2022-07-01
- 1.1.3 — 2022-06-30
- 1.1.2 — 2022-04-02
- 1.1.1 — 2022-04-01
- 1.1.0 — 2022-04-01
- 1.0.0 — 2022-04-01

## README

# ToggleTree 
ToggleTree makes `ul > li > ul` stuctures collapsible by adding click events.

# Installation
```sh
$ npm install toggletree 
```

# Quick start
Consider the following `html` structure
```html
<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.
```javascript
import { ToggleTree } from "toggletree";

const parent = document.querySelector('nav');

const toggletree = new ToggleTree(parent);
```
# API
##### toggle(listItem)
Toggle the child `ul` element
```javascript
toggletree.toggle(document.querySelector('li[name=projects]'));
```
##### show(listItem)
Show the child `ul` element
```javascript
toggletree.show(document.querySelector('li[name=projects]'));
```
##### showAll()
Show all `ul` child elements
```javascript
toggletree.showAll();
```
##### collapse(listItem)
Collapse the child `ul` element
```javascript
toggletree.collapse(document.querySelector('li[name=projects]'));
```
##### collapseAll()
Collapse all `ul` child elements
```javascript
toggletree.collapseAll();
```

---
_Source: https://npm.io/package/toggletree · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._