JSFiddle - React, Tailwind, and code Playground

by ionko22

HTML

<ul class="list-menu level-1-list">
<li><a href="#">Link 1 (level 1)</a><span></span></li>
<li><a href="#">Link 2 (level 1)</a><span></span>
<ul class="list-menu level-2-list">
<li><a href="#">Link 2-1 (level 2)</a><span></span></li>
<li><a href="#">Link 2-1 (level 2)</a><span></span>
<ul class="list-menu level-3-list">
<li><a href="#">Link 2-1-1 (level 3)</a><span></span></li>
<li><a href="#">Link 2-1-2 (level 3)</a><span></span>

<ul class="list-menu level-4-list">
<li><a href="#">Link 2-1-2-1 (level 4)</a><span></span>
<ul class="list-menu level-5-list">
<li><a href="#">Link 2-1-2-1-1 (level 5)</a><span></span></li>
<li><a href="#">Link 2-1-2-1-2 (level 5)</a><span></span></li>
<li><a href="#">Link 2-1-2-1-3 (level 5)</a><span></span></li>
</ul>
</li>
<li><a href="#">Link 2-1-2-2 (level 4)</a><span></span></li>
<li><a href="#">Link 2-1-2-3 (level 4)</a><span></span>
<ul class="list-menu level-5-list">
<li><a href="#">Link 2-1-2-3-1 (level 5)</a><span></span></li>
<li><a href="#">Link 2-1-2-3-2 (level 5)</a><span></span></li>
<li><a href="#">Link 2-1-2-3-3 (level 5)</a><span></span></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Link 2-1-3 (level 3)</a><span></span></li>
</ul>

</li>
<li><a href="#">Link 2-1 (level 2)</a><span></span></li>
</ul>
</li>
<li><a href="#">Link 3 (level 1)</a><span></span>
<ul class="list-menu level-2-list">
<li><a href="#">Link 3-1 (level 2)</a><span></span></li>
<li><a href="#">Link 3-2 (level 2)</a><span></span></li>
<li><a href="#">Link 3-3 (level 2)</a><span></span></li>
</ul>
</li>
<li><a href="#">Link 4 (level 1)</a><span></span></li>
</ul>

CSS

.colapsed{
	background:#F0F;
	display:block;
	width:10px;
	height:16px;
	padding-left:6px;
	float:left;
	cursor:pointer;
}

.expanded{
	background:#F00;
	display:block;
	width:10px;
	height:16px;
	padding-left:6px;
	float:left;
	cursor:pointer;
}

.list-menu{
	margin:0px;
	padding:0px;
	list-style:none;
	display:block;
    clear:both;
}

.list-menu li{
	padding:10px 0px 10px 0px;
	display:block;
	display:inline-block;

}
.list-menu li a{
	display:block;
	float:left;
	width:180px;
}

.level-1-list{
	background:#CCC;
	width:200px;
}
.level-2-list{
	background:#09F;
}

.level-3-list{
	background:#0F0;
}

.level-4-list{
	background:#0FF;
}

.level-5-list{
	background:#F33;
}

JavaScript

var navLevel1 = $(".level-1-list");
var navLevel2 = $(".level-2-list");
var navLevel3 = $(".level-3-list");
var navLevel4 = $(".level-4-list");
var navLevel5 = $(".level-5-list");

navLevel2.hide();
navLevel3.hide();
navLevel4.hide();
navLevel5.hide();


function listMenuTrigger(listItemWithChildren) {
 listItemWithChildren.next("ul").toggle();
 listItemWithChildren.closest("li").not(".level-1-list li").siblings().toggle();//not not working
	
if (listItemWithChildren.next("ul").is(":visible")) {
	listItemWithChildren.removeClass("colapsed");	
	listItemWithChildren.addClass("expanded");	
}
else {
	listItemWithChildren.removeClass("expanded");	
	listItemWithChildren.addClass("colapsed");
}
}

$(".list-menu li:has(ul)").children("span").addClass("colapsed");

$( document ).ready(function() {
$(".colapsed").click(function(){       
   listMenuTrigger( $(this) );             
})
});