JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/riot/2.4/riot+compiler.min.js"></script>
<script type="riot/tag">
	<floor>
		<node each={child, i in node ? [node]: []} node={child}></node>
    
   	node = {
    	children: [{
      	children: [{
        	children: []
        }, {
        	children: []
        }]
      }]
    }
	</floor>
</script>

<script type="riot/tag">
	<node>
  	<div class="test" onclick={hide}>
    	Hi there
      <div class="children {hide: !visible}">
    		<node each={child, i in node.children} node={child}></node>
      </div>
    </div>
    
    this.node = this.opts.node;
    this.visible = false;
    this.hide = function(e){
      e.stopPropagation();
      this.visible = !this.visible;
    }
	</node>
</script>

<floor></floor>

CSS

.test{
  padding-left: 10px;
}

.children.hide{
  display: none;
}

JavaScript

riot.mount('floor');

/*
 * 1. Click the first node to show the children.
 * 2. Click the second node to show the children.
 * 3. Click the second node to hide the children.
 * 4. Click the first node to hide the children.
 * 5. Click the first node to show the children, this one works too
 */