Make it tree structure layout using HTML CSS and javascripti

Make it tree structure layout using HTML CSS

/*====== CSS ======*/ 

ul, #tree_list { list-style-type: none;}
#tree_list {  margin: 0;  padding: 0;}
#tree_list .box1 {  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; }
#tree_list .box1::before {  content: "\2610";  color: black;  display: inline-block;  margin-right: 6px;}
#tree_list .check-box::before {  content: "\2611";   color: dodgerblue;}
.nested { display: none;}
.active { display: block;}
 

/*====== HTML ======*/ 

<ul id="tree_list">
   <li><span class="box1">Beverages</span>
     <ul class="nested"> 
       <li><span class="box1">Tea</span>
         <ul class="nested"> 
           <li><span class="box1">Green Tea</span>
             <ul class="nested"> 
             </ul>
           </li>
         </ul>
       </li>  
     </ul>
   </li>
 </ul>
 
 
/*====== Script ======*/ 
<script>
    /* Tree structure related script */
var toggler = document.getElementsByClassName("box1");
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");
  });
}
</script>