JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<ul id="myUL">
 <li>  beverage?</li>
 <li><span class="box">yes</span>
 <span class="box">no</span>
 <ul class="nested">
 <li>eat?</li>
 <li><span class="box">yes</span>
 <span class="box">no</span>
 <ul class="nested">
 <li>ecc</li>
 </ul>
 </li>
 </ul>
 </li>
 </ul>

CSS

ul, #myUL {
 list-style-type: none;
 }

  #myUL {
  margin: 0;
   padding: 0;
   } 

  .box {
 cursor: pointer;
 -webkit-user-select: none; /* Safari 3.1+ */
 -moz-user-select: none; /* Firefox 2+ */
 -ms-user-select: none; /* IE 10+ */
 user-select: none;
 }

.box::before {
 content: "\2610";
 color: black;
 display: inline-block;
 margin-right: 6px;
 }

.check-box::before {
 content: "\2611"; 
 color: dodgerblue;
 }

.nested {
 display: none;
 }

 .active {
  display: block;
  }

JavaScript

var toggler = document.getElementsByClassName("box");
var i;

for (i = 0; i < toggler.length; i++) {
 toggler[i].addEventListener("click", function() {                                      this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("check-box");
  });
 }