Experiment details/summary

[Rolf B]

Hallo beatovich,

du hast mehrere Probleme.

• HTMLDetailsElement.open ist ein bool, kein String
• click ist das falsche Event. Korrekt ist toggle, dann kommst Du dem click-Handling des Browsers nicht in die Quere.

Folgender Eventhandler funktioniert bei mir mit Chrome prächtig:

	detail.addEventListener("toggle", function(ev) { 
			let thisEl = this;
      this.querySelector("summary").setAttribute("aria-expanded", this.open ? "true" : "false");
      if (this.open) {
			  var siblings = this.parentElement.querySelectorAll("details");
			  siblings.forEach( function(sibling) {
          sibling.open = sibling === thisEl;
  			});
      }
		});

Um thisEl zu vermeiden, könnte man ev.target verwenden, oder als Callback für forEach eine Arrow-Function verwenden. Arrow-Functions erzeugen keinen neuen this-Kontext.

Ich hatte den forEach Callback zuerst als

   if (sibling !== thisEl) sibling.open = false;

geschrieben, aber die blinde Zuweisung funktioniert genauso gut.

Rolf