Tree

        <coral-tree id="mytree" style="width: 240px">
          <coral-tree-item disabled=""><coral-tree-item-content>Item 2</coral-tree-item-content></coral-tree-item>
          <coral-tree-item expanded="">
            <coral-tree-item-content>Item 1 with <a class="coral-Link" href="#" coral-interactive="">link</a></coral-tree-item-content>
            <coral-tree-item disabled=""><coral-tree-item-content>Sub Item 1</coral-tree-item-content></coral-tree-item>
            <coral-tree-item expanded="">
              <coral-tree-item-content>Sub Item 2</coral-tree-item-content>
              <coral-tree-item expanded="">
                <coral-tree-item-content>Item 1</coral-tree-item-content>
                <coral-tree-item disabled=""><coral-tree-item-content>Sub Item 1</coral-tree-item-content></coral-tree-item>
                <coral-tree-item variant="leaf">
                  <coral-tree-item-content>Sub Item 2</coral-tree-item-content>
                </coral-tree-item>
              </coral-tree-item>
            </coral-tree-item>
          </coral-tree-item>
          <coral-tree-item variant="leaf"><coral-tree-item-content>Item 2</coral-tree-item-content></coral-tree-item>
          <coral-tree-item hidden=""><coral-tree-item-content>Item 3</coral-tree-item-content></coral-tree-item>
        </coral-tree>

        <script>
          window.addEventListener('load', function() {
            const mytree = document.getElementById('mytree');
            mytree.on('coral-tree:expand', (event) => {
              console.log(event.detail.item.content.textContent.trim() + ' is open');
            });
            mytree.on('coral-tree:collapse', (event) => {
              console.log(event.detail.item.content.textContent.trim() + ' is closed');
            });
            mytree.on('coral-tree:change', (event) => {
              console.log(event.detail.selection.content.textContent.trim() + ' is selected');
            });
          });
        </script>
      

        <coral-tree style="width: 240px">
          <coral-tree-item id="tree-item">
            <coral-tree-item-content>Item 1</coral-tree-item-content>
          </coral-tree-item>
        </coral-tree>

        <div class="u-coral-margin">
          <a id="add-item" class="coral-Link" href="#">Add item</a>
          <a id="remove-item" class="coral-Link" href="#">Remove item</a>
        </div>

        <script>
          window.addEventListener('load', function() {
            var tree = document.getElementById('tree-item');
            var add = document.getElementById('add-item');
            var remove = document.getElementById('remove-item');

            add.addEventListener('click', function(e) {
              e.preventDefault();
              tree.items.add({
                content: {
                  textContent: 'Sub item ' + (tree.items.length + 1)
                }
              });
            });

            remove.addEventListener('click', function(e) {
              e.preventDefault();
              tree.items.length && tree.items.last().remove();
            });

            tree.addEventListener('coral-collection:add', function() {
              tree.expanded = true;
            });

            tree.addEventListener('coral-collection:remove', function() {
              if (!tree.items.length) {
                tree.expanded = false;
              }
            });
          });
        </script>