JSFiddle - React, Tailwind, and code Playground

by jahongirsobirov

HTML

<script src="https://signel.onrender.com/signel.js"></script>
<div id="app">
  <b id="tree-head">My tree $$btn</b>
  <ul id="mytree"></ul>
</div>

JavaScript

let tree = list(['hello', 'world', "<b id='child'>Child folder $$btn</b>", '<ul id="childtree"></ul>'])
let child = list(['hello', 'world'])
let state = el("#tree-head", {
  btn: '[+]',
  style: 'cursor: pointer',
  extended: false
});

click("#tree-head", ()=>{
  if(state.extended === false){
    state.extended = true
    state.btn = '[-]'
    renderList("#mytree", tree, item => `<li>${item}</li>`)
    let childState = el("#child", {
      btn: '[+]',
      style: 'cursor: pointer',
      extended: false
    })
    click("#child", ()=> {
      // console.log("Child clicked")
      // tree.push("New stuff")
      if(childState.extended === false){
        childState.extended = true
        childState.btn = '[-]'
        renderList("#childtree", child, item => `<li>${item}</li>`)
      }else{
        childState.extended = false
        childState.btn = '[+]'
        renderList("#childtree", child, item => ``)
      }      
    });
  }else{
    state.extended = false
    state.btn = '[+]'
    renderList("#mytree", tree, item => ``)
  }
});