JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

</head>



        <div class="super">node level1
             <div class="super">node level2
                 <div class="sub">node level3...etc</div>
                 <div class="sub">node level4...etc</div>
                 <div class="sub">node level5...etc</div>
            </div>
            <div class="super">node level2
                 <div class="sub">node level6...etc</div>
                 <div class="sub">node level7...etc</div>
                 <div class="sub">node level8...etc</div>
            </div>
        </div>

</html>

CSS

div.super 
        { 
        color: black;
        position: relative;
        margin-left: 5px;
        z-index: 2;
        opacity: .5;
        background-color: yellow;
        width: 250px;
        }
        div.sub 
        { 
        color: black;
        position: relative;
        margin-left: 5px;
        z-index: 3;
        width:230px;
        background-color: red;
        opacity: 1;
        }

JavaScript

$(document).ready(function(){
    $('li').click(function(e){
      $(this).children('ul').toggle();
      e.stopPropagation();
      var $tester;
      $tester=$(this).children().size();
      alert($tester);
      
    });
    
    $('div').click(function(e){

      e.stopPropagation();
      var $tester;
      $tester=$(this).children().size();
        //alert($tester);
              for(var $j=0;$j<$tester;$j=$j+1){
                 ($(this).children().eq($j).toggle());
                 
                 //alert($(this).children().eq($j).children().size());
                 for(var $i=0;$i<($(this).children().eq($j).children().size());$i=$i+1){
                    ($(this).children().eq($j).children().eq($i).toggle());
                 }
              }
      
      
    });
});