JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li>
<a href="javascript:void(0);" class="togglecollapse" onclick="ToggleMenu(this);"></a>
Eintrag 1
<ul>
<li>
<a href="javascript:void(0);" class="togglecollapse" onclick="ToggleMenu(this);"></a>
Eintrag 1.1
<ul>
<li>Eintrag 1.1.1</li>
<li>Eintrag 1.1.2</li>
<li>Eintrag 1.1.3</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="togglecollapse" onclick="ToggleMenu(this);"></a>
Eintrag 1.2
<ul>
<li>Eintrag 1.2.1</li>
<li>Eintrag 1.2.2</li>
<li>Eintrag 1.2.3</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="togglecollapse" onclick="ToggleMenu(this);"></a>
Eintrag 1.3
<ul>
<li>Eintrag 1.3.1</li>
<li>Eintrag 1.3.2</li>
<li>Eintrag 1.3.3</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="togglecollapse" onclick="ToggleMenu(this);"></a>
Eintrag 2
<ul>
<li>
<a href="javascript:void(0);" class="togglecollapse" onclick="ToggleMenu(this);"></a>
Eintrag 2.1
<ul>
<li>Eintrag 2.1.1</li>
<li>Eintrag 2.1.2</li>
<li>Eintrag 2.1.3</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="togglecollapse" onclick="ToggleMenu(this);"></a>
Eintrag 2.2
<ul>
<li>Eintrag 2.2.1</li>
<li>Eintrag 2.2.2</li>
<li>Eintrag 2.2.3</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="togglecollapse" onclick="ToggleMenu(this);"></a>
Eintrag 2.3
<ul>
<li>Eintrag 2.3.1</li>
<li>Eintrag 2.3.2</li>
<li>Eintrag 2.3.3</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
.toggleexpand
{
background-image: url(/expand.png);
background-repeat: no-repeat;
padding-left:25px;
background-position: center;
}
.togglecollapse
{
background-image: url(/collapse.png);
background-repeat: no-repeat;
padding-left:25px;
background-position: center;
}
JavaScript
function ToggleMenu(element)
{
var content = element.parentNode;
var hide = element.className == 'togglecollapse';
for(i=0;i<content.childNodes.length;i++)
{
var child = content.childNodes[i];
if(child.tagName == 'UL')
{
for(j=0;j<child.childNodes.length;j++)
{
var childchild = child.childNodes[j];
if(hide)
{
childchild.style.display = 'none';
element.className = 'toggleexpand';
}
else
{
childchild.style.display = 'block';
element.className = 'togglecollapse';
}
}
}
}
}