JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
	<li>
		<span class="separator">Первый</span>
		<ul>
			<li>первый раз</li>
			<li>первый два</li>
			<li>первый три</li>
		</ul>
	</li>
	<li>
		<span class="separator active">Второй</span>
		<ul>
			<li>второй раз</li>
			<li>второй два</li>
			<li>второй три</li>
		</ul>
	</li>
	<li>
		<span class="separator">Третий</span>
		<ul>
			<li>третий раз</li>
			<li>третий два</li>
			<li>третий три</li>
		</ul>
	</li>
</li>

JavaScript

$('.menu .active').parent().siblings().children('ul').hide(); //скрываем все, кроме активного
	$('.menu .separator').on('click', function(){
                $(this).addClass('active')
				.siblings().slideDown()
				.parent().siblings().children('ul').slideUp();
                $(this).parent().siblings().children('.separator').removeClass('active');
 		    }
	);