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);
		}
    });

});