JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="accordion-menu">
    <li><a href="#">CLick</a>
        <ul>
            <li><a href="#">SubItem</a></li>
            <li><a href="#">SubItem</a></li>
            <li><a href="#">SubItem</a></li>
            <li><a href="#">SubItem</a></li>
        </ul>
    </li>
    <li><a href="#">CLick</a>
        <ul>
            <li><a href="#">SubItem</a></li>
            <li><a href="#">SubItem</a></li>
            <li><a href="#">SubItem</a></li>
            <li><a href="#">SubItem</a></li>
        </ul>
    </li>
    <li><a href="#">CLick</a>
        <ul>
            <li><a href="#">SubItem</a></li>
            <li><a href="#">SubItem</a></li>
            <li><a href="#">SubItem</a></li>
            <li><a href="#">SubItem</a></li>
        </ul>
    </li>
    <li><a href="#">CLick</a>
        <ul>
            <li><a href="#">SubItem</a></li>
            <li><a href="#">SubItem</a></li>
            <li><a href="#">SubItem</a></li>
            <li><a href="#">SubItem</a></li>
        </ul>
    </li>
</ul>

CSS

.accordion-menu li ul{
    display: none;
}

JavaScript

$('body').on('click', '.accordion-menu a', function (e) {

        if ($(this).siblings('ul').length) {
            e.preventDefault();
            if ($(this).closest('li').hasClass('active')) {
                $(this).siblings('ul').slideUp('normal', function () {
                    $(this).closest('li').removeClass('active');
                });
            } else {
                $(this).closest('.accordion-menu').find('li.active ul').slideUp('normal', function () {
                    $(this).closest('li').removeClass('active');
                });

                $(this).siblings('ul').slideDown('normal', function () {

                });
                $(this).closest('li').addClass('active');
            }
        }
    });