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="javascript:">1</a></li>
	<li class="page_item"><a href="javascript:">2</a></li>
</ul>
</li>
<li class="page_item "><a href="javascript:">B</a>
<ul class="children">
	<li class="page_item"><a href="javascript:">1</a></li>
	<li class="page_item"><a href="javascript:">2</a></li>
	<li class="page_item"><a href="javascript:">3</a></li>
	<li class="page_item"><a href="javascript:">4</a></li>
</ul>
</li>

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

CSS

ul.children{
  display: none;
}

JavaScript

$('.page_item').click(function(){
      var that = this;
      $('.page_item').each(function(){
       if(that == this)return true;//continue
       $('.children:not(:hidden)',this).slideToggle();
      });
      $('ul.children',this).slideToggle();
    });