JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<ul class="menu">
    <li><a href="#">menu1</a>

    </li>
    <li class="expanded"> <a href="#">menu2</a>

        <ul class="menu">
            <li><a href="#">menu 2.1</a>

            </li>
            <li><a href="#">menu 2.2</a>

            </li>
            <li><a href="#">menu 2.3</a>

            </li>
        </ul>
    </li>
    <li><a href="#">menu3</a>

    </li>
    <li class="expanded"> <a href="#">menu4</a>

        <ul class="menu">
            <li><a href="#">menu 4.1</a>

            </li>
            <li><a href="#">menu 4.2</a>

            </li>
        </ul>
    </li>
    <li class="expanded"> <a href="#">menu5</a>

        <ul class="menu">
            <li><a href="#">menu 5.1</a>

            </li>
            <li><a href="#">menu 5.2</a>

            </li>
        </ul>
    </li>
</ul>

JavaScript

$(function () {
    $('li.expanded > ul').hide();
    $('li.expanded > a').click(function () {
        $('li.expanded > ul').not($(this).next()).hide();
        $(this).next().stop(true, true).slideToggle();
    });
});