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 () {
        selector = $(this).find(' > .depth-two');
        if ($(selector).css("display") == "none") {
            selector.slideDown(800);
        } else {
            selector.slideUp(800);
        }
    });

    $('li li').click(function (e) {
        e.stopPropagation();
    });

});