JSFiddle - React, Tailwind, and code Playground

HTML

<div id="aside">
    <div id="column">
        <ul>
            <li id="dashboard"><a href="">&nbsp;&nbsp;&nbsp;Dashboard</a></li>
            <li id = "catalogs"><a href="#">&nbsp;&nbsp;&nbsp;Catalog</a>

                <div id="q">
                    <ul>
                        <li><a href="">Catogeries</a></li>
                        <li><a href="">Departure Location</a></li>
                        <li><a href="">Return Location </a></li>
                        <li><a href="">Cities </a></li>
                        <li><a href="">Vendor </a></li>
                        <li><a href="">Discount Coupons</a></li>
                        <li> <a href="">Remaining Seats </a></li>
                    </ul>
                </div>
            </li>
            <li id="user"><a href="#">&nbsp;&nbsp;&nbsp;Users</a>
                <div id="g">
                    <ul>
                        <li><a href="">Customer</a></li>
                        <li><a href="">Admin</a></li>
                        <li><a href="">Agents</a></li>
                    </ul>
                </div>
            </li>
            <li id="catalog"><a href="#">&nbsp;&nbsp;&nbsp;Customers</a>
                <div id="s">
                    <ul>
                        <li><a href="">Customer</a></li>
                        <li><a href="">Orders</a></li>
                        <li><a href="">Reward System</a></li>
                    </ul>
                </div>
            </li>
            <li id="repot"><a href="#">&nbsp;&nbsp;&nbsp;Reports</a>
                <div id="k">
                    <ul>
                        <li><a href="">Monthly</a></li>
                        <li><a href="">Comission Report</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>

JavaScript

$("#column li").click(function() {
        $('#column li li').not($(this).find('li')).hide();
        $(this).find('li').toggle();
    });