JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<h1>Navigation mit Details/Summary</h1>
<p>Exclusiv geschaltete detail Elemente sollen jeweils nur einen "thread" in dieser Verschachtelung anzeigen.</p>
<p>Reagiert auf Tastatur und Click</p>

<nav>
	<details>
		<summary>Level 1 A</summary>
		<div class="nav">
			<details>
				<summary>Level 2 A</summary>
				<div>Lorem dolores ipsum sunt </div>
			</details>
			<details>
				<summary>Level 2 B</summary>
				<div class="nav">
					<details>
						<summary>Level 3 A</summary>
						<div>Lorem dolores ipsum sunt </div>
					</details>
					<details>
						<summary>Level 3 B</summary>
						<div>Lorem dolores ipsum sunt </div>
					</details>
				</div>
				<div>Lorem dolores ipsum sunt </div>

			</details>
		</div>
	</details>
	<details>
		<summary>Level 1 B</summary>
		<div>Lorem dolores ipsum sunt </div>
	</details>
	<details>
		<summary>Level 1 C</summary>
		<div>content</div>
	</details>
	<details>
		<summary>Level 1 D</summary>
		<div>content</div>
	</details>
</nav>

<p>Other Content</p>

CSS

html { 
   font-size:3.2mm; line-height:1.5; height:100%;
}
body {
   height:100%; padding: 1rem;
}
* {
   margin:0;padding:0; font-size:1rem;box-sizing: border-box; 
}
:focus { 
   outline: 2px solid orange; z-index:20;
}
h1 { margin: 1rem 0; font-size:2rem; }

nav {  background:#fff; width:20rem; margin: 1rem 0; }
.nav { padding: 0 0 0 2rem;}
nav, .nav {  /*! width:40rem; */  }
nav summary { position:relative; background:#fff; transition: background-color 1s; white-space: nowrap; padding: 0 1rem; }
nav summary[aria-expanded="true"] { background:#e33;  white-space: nowrap; padding: 0 1rem; }
nav summary:focus { z-index:10; }
nav details {border:0 solid #ccc; border-width: 0 0 0.1rem 0.1rem;/*! background:#fff; */  margin-right:auto; }
nav div:not(.nav) { overflow:auto; padding: 0.5rem 1rem; /*! box-shadow: 1px 1px 2px 0px #666; */ }
nav + * { margin-top:2rem; }

JavaScript

(function (){
  console.log("Hello");
  document.body.classList.remove("noscript");
  document.querySelectorAll(".tablist [aria-expanded], .details [aria-expanded]")
    .forEach( function(item){
      console.log("Lösche expanded für " + item.innerText);
	    item.setAttribute("aria-expanded",false);
  });
  
  document.querySelectorAll("details").forEach( function(detail){
	  detail.querySelector("summary").setAttribute("aria-expanded","false");
    
	detail.addEventListener("toggle", function(ev) { 
			let thisEl = ev.target;
      thisEl.querySelector("summary").setAttribute("aria-expanded", thisEl.open ? "true" : "false");
      if (thisEl.open) {
			  var siblings = thisEl.parentElement.querySelectorAll("details");
			  siblings.forEach( function(sibling) {
          if (sibling !== thisEl)
             sibling.removeAttribute("open");
  			});
      }
		});
});
})();