JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
    <li class="menu-top-item">
        <a class="menu-top-item-link" href=" # ">Item 1</a>
        <ul id="submenu">
            <li class="menu-sub-item ">
                <a class="menu-sub-item-link " href="# " data-menu="show1 ">Sub menu 1</a>
            </li>
            <li class="menu-sub-item">
                <a class="menu-sub-item-link " href="# " data-menu="show2 ">Sub menu 2</a>
            </li>
        </ul>
    </li>
</ul>
<div id="show1" class="content ">Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. </div>
<div id="show2" class="content ">Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri </div>

JavaScript

$(document).ready(function () {
    $('.menu-top-item-link').click(function () {
        $('#submenu').fadeToggle();
        $('.content').fadeOut();
        return false;
    });
    $('.menu-sub-item-link').click(function () {
        var menu = $(this).data("menu");
        $('#' + menu).fadeIn();
        return false;
    });
});