JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li class="main-menu-item">
    <a href="#">Link</a>
    <ul class="sub-menu">
      <li>Stuff</li>
    </ul>
  </li>
</ul>

CSS

ul {
    list-style-type:  none;
}
.sub-menu {
    display: none
}

JavaScript

(function( $ ) {
    'use strict';
    $(function() {

        var menuItem = $('#nav__menu li.main-menu-item'),
                subMenuItem = $('#nav__menu ul.sub-menu' );
        // setup
        menuItem.parents().attr('tabIndex',-1).attr('aria-haspopup',true);
        subMenuItem.attr('aria-hidden', true);

        menuItem.on('click', function(e) {
            e.preventDefault();
            $(this).toggleClass('active');
            $(this).siblings('.active').removeClass('active');
        });
        subMenuItem.each(function() {
            if($(this).parents().hasClass('active')) { 
          $(this).find(subMenuItem).attr('aria-hidden', false).slideDown();
        } else {
          $(this).find(subMenuItem).attr('aria-hidden', true).slideup(); 
        }
        });
    });
})( jQuery );