JSFiddle - React, Tailwind, and code Playground

by reentim

HTML

<ol class="parent">
  <li> <a href="http://google.com">First Parent</a>

    <ol class="child">
      <li><a href="http://google.com">Child 1</a>

      </li>
      <li>Child 2</li>
      <li>Child 3</li>
    </ol>
  </li>
  <li> <a href="http://google.com">Second Parent</a> 
    <ol class="child">
      <li>Child 1</li>
      <li><a href="http://google.com">Child 2</a>

      </li>
    </ol>
    <li> <a href="http://google.com">Third, no children</a>

    </li>
</ol>

CSS

ol.child {
  margin-left: 15px;
}

JavaScript

$('.child').hide(); //Hide children by default

$('ol li').click(function (event) {
  event.preventDefault();
  $(this).children('.child').slideToggle('slow');
});


//TWO ISSUES

// 1. This results in ALL children getting toggled open
// 2. Clicking a link in the sub menu toggles the menu back open


//A classic 'scope' issue, I guess.