JSFiddle - React, Tailwind, and code Playground

by hulya

HTML

<div id="pop-out-left"> 
    <ul>
        <li>
            <a>qwe</a>
            <ul>
                <li>
                    Hello qwe
                </li>
            </ul>
        </li>
        <li>
            <a>asd</a>
            <ul>
                <li>
                    Hello asd
                </li>
            </ul>
        </li>
        <li>
            <a>zxc</a>
            <ul>
                <li>
                    Hello zxc
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

#pop-out-left > ul > li > a + ul {
    display: none;
}
#pop-out-left > ul > li.active > a + ul {
    display: block;
}

JavaScript

$("#pop-out-left ul li a").click(function () {
    $("#pop-out-left ul li")
        .not($(this).parent())
        .removeClass("active");
    $(this).parent().toggleClass("active");
});