Icon Flyout / slidern ähnlich wie bei meiner Navigation

[Rolf B]

Hallo einsiedler,

Bitte nicht so "abstrakt" alles. Ich bin nicht so rutiniert wie ihr es seid.

Was in JavaScript eine Funktion mit Parametern ist, das ist Dir bisher nicht klar?

Die Funktion flyoutExtension kann es unter diesem Namen nur einmal geben. Wenn Du sie zweimal reinschreibst, gibt's einen Fehler im JavaScript. Aber einmal reicht auch, wenn Du ihr die ID als Parameter mitgibst.

flyoutExtension('menu-toggle');
flyoutExtension('titel-toggle');

function flyoutExtension (toggleId) {

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

	toggle.addEventListener('click', function() {
		const currentState = toggle.getAttribute('aria-expanded');
		const newState = currentState === 'true' ? 'false' : 'true';
		toggle.setAttribute('aria-expanded', newState);
		const isExpanded = toggle.getAttribute('aria-expanded') === 'true';
        menu.style.display = isExpanded ? 'block' : 'none';
	});
}			

Die Funktion wird zweimal aufgerufen. Beim ersten Mal enthält toggleId den Wert 'menu-toggle', beim zweiten Mal den Wert 'titel-toggle'. Da die Struktur des flyout-Widgets in beiden Fällen gleich ist, kann man es auch mit gleichartigem Code steuern. Der Unterschied ist nur die ID, über die man einsteigt.

Die lokale const toggle Variable wird bei beiden Aufrufen verwendet, aber das macht nichts. Zwei Aufrufe, zwei verschiedene Aufrufkontexte, das hält JavaScript auseinander. Beide Toggles bekommen ihren click-Handler und der bearbeitet dann das Toggle, für das er registriert wurde

Rolf