Display and interactively toggle an expandable tree structure in HTML.

by jahongirsobirov

HTML

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

CSS

ul { list-style-type: none; padding-left: 20px; } 
.collapsed > ul { display: none; } 
.node { cursor: pointer; }

JavaScript

// 1. Define reactive state for tree
var state = state({
  tree: [ 
    { 
      name: "Root", 
      expanded: true, 
      children: [ { name: "Child 1", expanded: false, children: [ { name: "Grandchild 1", expanded: false, children: [] }, { name: "Grandchild 2", expanded: false, children: [] } ]}, { name: "Child 2", expanded: false, children: [] } ]} ] 
}); 
// 2. Render function to display tree
function renderTree(nodes) {
   return `<ul> ${nodes.map(node => ` <li class="node ${node.expanded ? '' : 'collapsed'}"> <span onclick="toggleNode('${node.name}')">${node.name}</span> ${node.children.length ? renderTree(node.children) : ''} </li> `).join('')} </ul>`; 
} // 3. Toggle expand/collapse 
window.toggleNode = function(name) { 
  function toggle(nodes) { 
    for (let node of nodes) { 
      if (node.name === name) { 
        node.expanded = !node.expanded; 
      } else { 
        toggle(node.children); 
      } 
    } 
  } 
  toggle(state.tree); 
}; 

// 4. Bind tree to DOM 
render(() => { dom('#tree-container').html(renderTree(state.tree)); });