Icon Flyout / slidern ähnlich wie bei meiner Navigation

[Gunnar Bittersmann]

@@Rolf B

Da gibt’s noch einiges Verbesserungspotential:

	const toggle = document.querySelector('#' + toggleId);

Besser

	const toggle = document.querySelector(`#${toggleId}`);

Aber wohl noch besser:

	const toggle = document.getElementById(toggleId);

---

	toggle.addEventListener('click', function() {

Ich würde sowas als Pfeilfunktion schreiben. Muss man aber nicht.

---

		const currentState = toggle.getAttribute('aria-expanded');
		const newState = currentState === 'true' ? 'false' : 'true';
		toggle.setAttribute('aria-expanded', newState);
		const isExpanded = toggle.getAttribute('aria-expanded') === 'true';

Den aktuellen Ausgangszustand hast du bereits mit currentState abgefragt. Du kennst also den Folgezustand. Die erneute Abfrage des aktuellen Zustands macht keinen Sinn.

Sorge also dafür, dass du isExpanded gleich bei der ersten Abfrage von toggle.getAttribute('aria-expanded') setzt und verwende das auch schon bei toggle.setAttribute().

---

		menu.style.display = isExpanded ? 'block' : 'none';

Hier besser das hidden-Attribut verwenden. Das macht den Code besser lesbar, außerdem ist die Änderung im DOM im Inspektor im Entwicklertool sichtbar.

		menu.hidden = !isExpanded;

Jolan tru