penzai-js

A JavaScript library to create a collapsible tree with optional checkboxes without the use of jQuery, and uses ARIA descriptions. It is named after the ancient Chinese art of depicting artistically formed trees, other plants, and landscapes in miniature; similar to Japanese bonsai.

Demo

See CodePen for an interactive demo

<ul id="categoryTree">
  <li>Fruits
    <ol>
      <li>Apple
      <ol>
        <li>Golden Delicious</li>
        <li>Granny Smith</li>
      </ol>
      </li>
      <li>Banana</li>
    </ol>
  </li>
  <li>Vegetables
    <ol>
      <li>Carrot</li>
      <li>Broccoli</li>
    </ol>
  </li>
</ul>
<script src="penzai.min.js"></script>
<script>
    const tree = penzai(document.getElementById('categoryTree'), {
        checkboxes: false,
        expandAll: false // starts collapsed
    });
</script>