JSFiddle - React, Tailwind, and code Playground

by jahongirsobirov

HTML

<script src="https://signel.onrender.com/signel.js"></script>
<div id="tree"></div>

JavaScript

const tree = state({
  nodes: [
    {
      id: 1,
      label: 'Root',
      open: false,
      children: [
        { id: 2, label: 'Child 1', open: false, children: [] }
      ]
    }
  ]
});

function renderTree(nodes) {
  return `
    <ul>
      ${nodes.map(n => `
        <li data-id="${n.id}">
          <span class="toggle">${n.children.length ? (n.open ? '[-]' : '[+]') : ''}</span>
          ${n.label}
          ${n.open ? renderTree(n.children) : ''}
        </li>
      `).join('')}
    </ul>
  `;
}

render(() => {
  dom('#tree').html(renderTree(tree.nodes));
});

dom('#tree').click(()=> tree.nodes[0].open = !tree.nodes[0].open);



function toggleNode(nodes, id) {
  for (const n of nodes) {
    if (n.id === id) {
      n.open = !n.open;
      return;
    }
    if (n.children.length) toggleNode(n.children, id);
  }
}