JSFiddle - React, Tailwind, and code Playground

HTML

<li class="page_item "><a href="javascript:">A</a>
<ul class="children">
	<li class="page_item"><a href="">1</a></li>
	<li class="page_item"><a href="">2</a></li>
</ul>
</li>
<li class="page_item "><a href="">B</a>
<ul class="children">
	<li class="page_item"><a href="">1</a></li>
	<li class="page_item"><a href="">2</a></li>
	<li class="page_item"><a href="">3</a></li>
	<li class="page_item"><a href="">4</a></li>
</ul>
</li>

<li class="page_item "><a href="">C</a>
<ul class="children">
	<li class="page_item"><a href="">1</a></li>
	<li class="page_item"><a href="">2</a></li>
	<li class="page_item"><a href="">3</a></li>
	<li class="page_item"><a href="">4</a></li>
</ul>
</li>

CSS

ul.children{
  display: none;
}

JavaScript

$('.page_item').click(function(){

	$('ul.children').slideToggle();
 });