JSFiddle - React, Tailwind, and code Playground

by Peter Galiba

HTML

<ul class="menu level0">
    <li>
      <a href="#">Menu 1</a>
      <ul class="menu level1">
        <li>
          <a href="#">Menu 1</a>
          <ul class="menu level2">
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
            <li><a href="#">Menu 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Menu 2</a>
          <ul class="menu level2">
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
            <li><a href="#">Menu 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Menu 3</a>
          <ul class="menu level2">
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
            <li><a href="#">Menu 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Menu 4</a>
          <ul class="menu level2">
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
            <li><a href="#">Menu 4</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Menu 2</a>
      <ul class="menu level1">
        <li>
          <a href="#">Menu 1</a>
          <ul class="menu level2">
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
            <li><a href="#">Menu 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Menu 2</a>
          <ul class="menu level2">
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
            <li><a href="#">Menu 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Menu 3</a>
          <ul class="menu level2">
         ...

CSS

.level0 {
  width: 200px;
}
.menu > li > ul {
  display: none;
}
.menu > li.expanded > ul {
  display:block;
}

JavaScript

jQuery(function($) {
    $('.menu > li').click(function() {
        $(this).toggleClass('expanded');
        return false;
    })
})