JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js?ver=3.1.1"></script>
<ul class="list-unstyled">

    	<li class="cat-item cat-item-588"><a href="">Prehistory</a> <span class="post-count"> 2 </span>
<ul class="children closed">
	<li class="cat-item cat-item-589"><a href="">Stone age</a> <span class="post-count"> 2 </span>
	<ul class="children closed">
	<li class="cat-item cat-item-590"><a href="">Mesolithic</a> <span class="post-count"> 1 </span>
		<ul class="children closed">
	<li class="cat-item cat-item-599"><a href="">Culture</a> <span class="post-count"> 1 </span>
</li>
		</ul>
</li>
	<li class="cat-item cat-item-591"><a href="">Neolithic</a> <span class="post-count"> 0 </span>
</li>
	<li class="cat-item cat-item-598"><a href="">Palaeolithic</a> <span class="post-count"> 1 </span>
		<ul class="children closed">
	<li class="cat-item cat-item-592"><a href="">Nomadism</a> <span class="post-count"> 0 </span>
</li>
	<li class="cat-item cat-item-593"><a href="">Hunting and gathering</a> <span class="post-count"> 0 </span>
</li>
	<li class="cat-item cat-item-594"><a href="">Science</a> <span class="post-count"> 0 </span>
</li>
	<li class="cat-item cat-item-595"><a href="">Culture</a> <span class="post-count"> 1 </span>
			<ul class="children closed">
	<li class="cat-item cat-item-597"><a href="">1400</a> <span class="post-count"> 1 </span>
</li>
			</ul>
</li>
	<li class="cat-item cat-item-596"><a href="">Religion</a> <span class="post-count"> 0 </span>
</li>
		</ul>
</li>
	</ul>
</li>
</ul>
</li>
	</ul>

CSS

ul ul {
  display: none;
}

.closed {
    display: none;
}

.opened {
    display: block;
}

JavaScript

$("a").on("click", function(e) {
    $(this).nextAll("ul").toggleClass("closed opened");
    e.preventDefault();
});