JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
    <li>
        <a href="#">Some accordion title I guess</a>
        <ul>
            <li>Some accordion content</li>
            <li>Some accordion content</li>
            <li>Some accordion content</li>
            <li>Some accordion content</li>
            <li>Some accordion content</li>
        </ul>
    </li>
</ul>

CSS

/*
#nav li ul{
    display: none
}
*/

JavaScript

$(document).ready(function () {
    $('#nav > li > a').click(function() {
        if ($(this).attr('class') != 'active') {
            $('#nav li ul').slideUp();
            $(this).next().slideToggle();
            $('#nav li a').removeClass('active');
            $(this).addClass('active');
        }
    });
});
$(window).load(function(){
    //when the document finished loading, hide it; or maybe place this on the dom ready function?
    $('#nav li ul').hide();
});