JSFiddle - React, Tailwind, and code Playground

by Bob Wilson

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<li><span class="caret">Beverages</span>
  <ul class="nested">
    <li>Water</li>
    <li>Coffee</li>
    <li><span class="caret">Tea</span>
      <ul class="nested">
        <li>Black Tea</li>
        <li>White Tea</li>
        <li><span class="caret" id="xyz">Green Tea</span>
          <ul class="nested">
            <li>Sencha</li>
            <li>Gyokuro</li>
            <li>Matcha</li>
            <li>Pi Lo Chun</li>
          </ul>
        </li>
      </ul>
    </li>  
  </ul>
</li>
<li><span class="caret">Food</span>
  <ul class="nested">
    <li>Water</li>
    <li>Coffee</li>
    <li><span class="caret">Tea</span>
      <ul class="nested">
        <li>Black Tea</li>
        <li>White Tea</li>
        <li><span class="caret">Green Tea</span>
          <ul class="nested">
            <li>Sencha</li>
            <li>Gyokuro</li>
            <li>Matcha</li>
            <li>Pi Lo Chun</li>
          </ul>
        </li>
      </ul>
    </li>  
  </ul>
</li>

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

let $carets = $('.caret').on('click', e => {
    let $caret = $(e.target);
    
    // display the clicked item
    $caret.toggleClass('caret-down');
    $caret.closest('li').children('.nested').toggleClass('active');
    
  });
  
    $("#xyz").addClass('caret-down');
   let $parentCarets = $("#xyx").parents('li').children('.caret'); 
    $("#xyx").not($parentCarets).addClass('caret-down').closest('li').find('.nested').addClass('active');