JSFiddle - React, Tailwind, and code Playground

by Cerlin ST

HTML

<nav class="$nav_css_class" id="navigation" role="navigation">
    <ul id="accordion1" class="menu">
        <li class="active"><a href="#"><i
				class="fa fa-dashboard fa-lg custom-next-line"></i> <span
				class="custom-next-line">Dashboard</span></a>
        </li>
        <li><a href="#"><i class="fa fa-tasks fa-lg custom-next-line"></i>
				<span class="custom-next-line">eReceipt Issued and Deposit
					Inquiry</span></a>
        </li>
        <li><a href="#"><i
				class="fa fa-sort-amount-asc fa-lg custom-next-line"></i> <span
				class="custom-next-line">Deposited Checks Details</span></a>
        </li>
        <li><a href="#"><i
				class="fa fa-mobile fa-2x custom-next-line"></i> <span
				class="custom-next-line">Revenue Collection Officer Module</span></a>

            <ul class="sub-menu">
                <li><a><i class="fa fa-plus-square fa-lg indent-line"></i>
						Issue eReceipt</a>

                    <ul class="sub-menu">
                        <li><a href="#"><i class="indent-line"></i>Revenue
								Official Receipt</a>
                        </li>
                        <li><a href="#"><i class="indent-line"></i>Official
								Receipt</a>
                        </li>
                        <li><a href="#"><i class="indent-line"></i>Acknowledgement
								Receipt</a>
                        </li>
                    </ul>
                </li>
                <li><a><i class="fa fa-plus-square fa-lg indent-line"></i>
						Issue eReceipt for Manual</a>

                    <ul class="sub-menu">
                        <li><a href="#"><i class="indent-line"></i>Revenue
								Official Receipt</a>
                        </li>
                        <li><a href="#"><i class="indent-line"></i>Official
								Receipt</a>
                        </li>
                        <li><a href="#"><i class="indent-line"></i>Acknowledgement
								Receipt</a>
                        </li>
                    </ul>
                </li>
    ...

CSS

ul li {

    list-style: none;

    margin: 0;

    width: 100%;

}

JavaScript

function initMenu() {
    $(".sub-menu").hide();
    $('#accordion1 li a').click(
    function () {
        var checkElement = $(this).next();
        var allelems = $('#accordion1 li ul');
            allelems.not(checkElement).slideUp('normal');
            checkElement.slideDown('normal');
    });
}
$(function () {
    initMenu();
});