JSFiddle - React, Tailwind, and code Playground

HTML

<div id="left_menu">
	<ul id="js-left_menu">
<?
$DL=1;
foreach($arResult as $k=>$arItem) {
	if($arParams["MAX_LEVEL"] == 1 && $arItem["DEPTH_LEVEL"] > 1) continue;

	if($arItem['DEPTH_LEVEL'] > $DL) echo '<ul>';
	elseif($arItem['DEPTH_LEVEL'] < $DL) echo '</li></ul></li>';
	elseif($arItem['DEPTH_LEVEL'] == $DL AND $k>0) echo '</li>';

	$DL = $arItem['DEPTH_LEVEL'];
	//na($arItem['PARAMS']['hover']);
	$class = $aka = false;
	$class.= $arItem['SELECTED'] ? 'text_sel' : '';
	$class.= $arItem['PARAMS']['hover']==1 ? ' hover popupExpress' : '';

	echo 	'<li'.($arItem['SELECTED']?' class="root_sel"':'').'>
				<a href="'.$arItem['LINK'].'" class="'.$class.'"'./*($arItem['PARAMS']['aka']==1?' onClick="itemAka(this); return false"':'').*/'>'.$arItem['TEXT'].'</a>';
}
if($DL > 1)
{
	for($i=$DL; $i<1; $i--)
		echo '</li></ul>';
}
?>

		</li>
	</ul>
</div>

JavaScript

function itemAka() {
	$('ul#js-left_menu ul').each(function(i) {
		if ($(this).find('.text_sel').length || i==0) {
			$(this).show().prev().removeClass('collapsed').addClass('expanded');
		}else {
			$(this).hide().prev().removeClass('expanded').addClass('collapsed');
		}
		$(this).prev().addClass('collapsible').click(function() {
			var this_i = $('ul#js-left_menu ul').index($(this).next());
			if ($(this).next().css('display') == 'none') {
				$(this).next().slideDown(300, function () {
					$(this).prev().removeClass('collapsed').addClass('expanded');
					//cookieSet(this_i);
				});
			}else {
				$(this).next().slideUp(300, function () {
					$(this).prev().removeClass('expanded').addClass('collapsed');
					//cookieDel(this_i);
					$(this).find('ul').each(function() {
						//$(this).hide(0, cookieDel($('ul#js-left_menu ul').index($(this)))).prev().removeClass('expanded').addClass('collapsed');
						$(this).hide().prev().removeClass('expanded').addClass('collapsed');
						$(this).css('display', 'none');
					});
				});
			}
		return false;
		});
	});
}