JSFiddle - React, Tailwind, and code Playground

HTML

<h3 class="parent">Is this computer a Mac?</h3>
<ul class="show">
  <li>Does this computer have Windows?</li>
  <li><a href="#"><strong>YES</strong></a>
    <ul>
      <li>Do you use Chrome?</li>
      <li><a href="#"><strong>YES</strong></a>
        <ul>
          <li>Do you like it?</li>
          <li><a href="#"><strong>YES</strong></a>
            <ul>
              <li>Great, Keep Using It!</li>
            </ul>
          </li>
          <li><a href="#"><strong>NO</strong></a>
            <ul>
              <li>Try Firefox Maybe... </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#"><strong>NO</strong></a>
        <ul>
          <li> You should try it.</li>
        </ul>
      </li>
    </ul>
</li>
  <li><a href="#"><strong>NO</strong></a>
    <ul>
      <li>Are you using Linux?</li>
      <li><a href="#"><strong>YES</strong></a>
        <ul>
          <li>Do You Like it?</li>
          <li><a href="#"><strong>YES</strong></a>
            <ul>
              <li>Great!</li>
            </ul>
          </li>
          <li><a href="#"><strong>NO</strong></a>
            <ul>
              <li>Too Bad...</li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#"><strong>NO</strong></a>
        <ul>
          <li>Have You Heard of Linux?</li>
          <li><a href="#"><strong>YES</strong></a>
            <ul>
              <li>Great!</li>
            </ul>
          </li>
          <li><a href="#"><strong>NO</strong></a>
            <ul>
              <li>Check it out online!</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

JavaScript

$('ul').hide();

$('a').click( function(){
    $(this).closest('li').siblings(':not(:first-child)').hide();
    });

$('h3').css('cursor','pointer');

$('h3').click(function(){
 $('.show').slideToggle('fast');        
});

$('ul li a').click(function(){
 $(this).next('ul').slideToggle('fast');
});