SEO-friendly Hierarchical Tree In Pure JavaScript – ultree

The ultree JavaScript library lets you create nested, SEO-friendly, collapsible/expandable lists to represent your hierarchical data in a tree manner.

How to use it:

Import the ultree’s JavaScript and CSS files into the html page.

<link rel="stylesheet" href="ultree.css">
<script src="ultree.min.js"></script>

Add the CSS class ultree to the parent list.

<ul id='example' class='ultree'>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
</ul>

Transform the nested HTML lists into a tree.

ultree.generateTree({
  listId: "example",
  bullet: '•'
});

Collapse & expand all tree nodes.

ultree.openAll('example');
ultree.closeAll('example');

Filter the tree by a provided value.

ultree.filterTree({
  listId: 'example',
  filterValue: 'Tea'
});

Search for a specified value in the tree.

ultree.filterTree({
  listId: 'example',
  searchValue: 'Tea'
});