JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
	<ul>
		<li>
			<input type="radio" name="navi_1" id="navi_1_1" class="hackbox" checked><label for="navi_1_1"></label><a>Link Haupt</a>
			<ul>
				<li>
					<input type="radio" name="navi_2" id="navi_2_1" class="hackbox" checked><label for="navi_2_1"></label><a>Link Sub</a>
					<ul>
						<li>
							<input type="radio" name="navi_3" id="navi_3_1" class="hackbox"><label for="navi_3_1"></label><a>Link Sub-Sub</a>
						</li>
						<li>
							<input type="radio" name="navi_3" id="navi_3_2" class="hackbox"><label for="navi_3_2"></label><a>Link Sub-Sub</a>
						</li>
						<li>
							<input type="radio" name="navi_3" id="navi_3_3" class="hackbox"><label for="navi_3_3"></label><a>Link Sub-Sub</a>
						</li>
			
					</ul>
				</li>
				<li>
					<input type="radio" name="navi_2" id="navi_2_2" class="hackbox"><label for="navi_2_2"></label><a>Link Sub</a>
					<ul>
						<li>
							<input type="radio" name="navi_3" id="navi_3_4" class="hackbox"><label for="navi_3_4"></label><a>Link Sub-Sub</a>
						</li>
						<li>
							<input type="radio" name="navi_3" id="navi_3_5" class="hackbox"><label for="navi_3_5"></label><a>Link Sub-Sub</a>
						</li>
						<li>
							<input type="radio" name="navi_3" id="navi_3_6" class="hackbox"><label for="navi_3_6"></label><a>Link Sub-Sub</a>
						</li>
					</ul>
				</li> 
				<li>
					<input type="radio" name="navi_2" id="navi_2_3" class="hackbox"><label for="navi_2_3"></label><a>Link Sub</a>
					<ul>
						<li>
							<input type="radio" name="navi_3" id="navi_3_7" class="hackbox"><label for="navi_3_7"></label><a>Link Sub-Sub</a>
						</li>
						<li>
							<input type="radio" name="navi_3" id="navi_3_8" class="hackbox"><label for="navi_3_8"></label><a>Link Sub-Sub</a>
						</li>
						<li>
							<input type="radio" name="navi_3" id="navi_3_9" class="hackbox"><label for="navi_3_9"></label><a>Link Sub-Sub</a>
						</li>
					</ul>
				</li>  
			</ul>    
		</li>
		<li>
			<input type="radio" name="navi_1"...

CSS

nav .hackbox {display:none;}

nav>ul { background-color:#ccc; padding:15px !important; border:1p solid darkgrey; border-radius:5px; }

nav ul { list-style-type:none; width:300px; padding-left:0px; }

nav ul ul { max-height:0vh; overflow:hidden; transition:max-height 1s; width:275px; padding-left:25px; }

nav ul ul ul { width:250px; padding-left:25px; }

nav label { display:inline-block; width:20px; margin-right:3px; background-color:lightgrey; border-radius:3px; box-shadow:1px 1px 0px 0px; }

nav ul a { display:inline-block; border-bottom:1px solid grey; padding:3px; width:271px; margin-top:2px; border-radius:3px; background-color:#999; box-shadow:1px 1px 0px 0px; }

nav ul a:hover, nav ul .hackbox:checked ~ a:hover { background-color:red; }

nav ul ul a { width:246px; background-color:#bbb; }

nav ul ul ul a { width:221px; background-color:#ccc; }

nav ul .hackbox:checked ~ ul { max-height:100vh; }

nav ul .hackbox:checked ~ a { font-weight:bold; }

nav>ul>li>.hackbox:checked~label::before, nav>ul>li>ul>li>.hackbox:checked~label::before { content:"\21D3"; }

nav>ul>li>label::before, nav>ul>li>ul>li>label::before {
    content:"\21D2";
    position:relative;
    left:0.5ex;
}

nav label:hover {
    font-weight:900; background-color:red;
}

JavaScript

function hackboxclick(elm,strict) {
    	
    if (elm.checkedBefore) {
		elm.checked = false;
		elm.checkedBefore = false;
	} else {
		elm.checkedBefore = true;
	}
	

    var ebene = elm.name.substr((elm.name.lastIndexOf('_')+1));
	ebene = Number(ebene);
	
	if (ebene != Number.NaN) {
	
		var namebase = elm.name.substr(0,elm.name.lastIndexOf('_')+1);
		
		var i = 1;
		var nelm = false;
		
		while (nelm = document.getElementById(namebase+(ebene)+'_'+i)) {
		    if (nelm != elm) {
				nelm.checkedBefore = false;
			}
			i++;
		}
		
		if (!strict) {
	
			var j = 1;
			
			while (document.getElementsByName(namebase+(ebene+j)).length > 0) {
			
				i = 1;
			
				while (nelm = document.getElementById(namebase+(ebene+j)+'_'+i)) {
					hackboxclick(nelm,true);
					i++;
				}
				
				j++;
			}
		}
	}
}


var elms = document.querySelectorAll('.hackbox');

for (var i = 0; i < elms.length; i++) {
    elms[i].addEventListener("click",function(){hackboxclick(this,false);});
    elms[i].checkedBefore = elms[i].checked;
}