JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="depth-one">
    <li>Category 1
        <ul class="depth-two">
            <li>Category 1.1</li>
            <li>Category 1.2</li>
            <li>Category 1.3</li>
        </ul>
    </li>
    <li>Category 2
        <ul class="depth-two">
            <li>Category 2.1</li>
            <li>Category 2.2</li>
            <li>Category 2.3</li>
        </ul>
    </li>
    <li>Category 3
        <ul class="depth-two">
            <li>Category 3.1</li>
            <li>Category 3.2</li>
            <li>Category 3.3</li>
        </ul>
    </li>
</ul>

CSS

ul {
    list-style: none;
    padding:0;
    margin:0;
}
.depth-one {
    display:block;
}
.depth-two {
    display:none;
}

JavaScript

$(document).ready(function () {

    $(".depth-one > li").click(function (e) {
        if (e.currentTarget == e.target) {
            selector = $(this).find(' > .depth-two');
            if ($(selector).css("display") == "none") {
				$('.depth-one > ul').slideUp(400);
				$(selector).slideDown(800);
            } else {
                selector.slideUp(800);
            }
        }
    });

});