# Exklusive Akkordeons Ein gängiges UI-Muster im Web ist eine Akkordeonkomponente (neudeutsch: Offenlegungs-Widget), die einzeln maximiert (oder minimiert) werden können, um ihren Inhalt ein- oder auszublenden. Dafür gibt es das native [details](https://wiki.selfhtml.org/wiki/HTML/Elemente/details)-Element. Eine Variante des Akkordeon-Musters ist das **exklusive Akkordeon**, bei dem nur eines der Offenlegungs-Widgets gleichzeitig geöffnet werden kann. Bis jetzt musste das mit viel JavaScript und noch mehr ARIA-Attributen von Hand nachgebaut werden. **Jetzt** gibt es die Möglichkeit, mehrere details-Elemente mit demselben name-Wert zu einer semantischen Gruppe zusammenzufassen. Wenn du eines der details-Elemente aus der Gruppe öffnest, wird das zuvor geöffnete Element automatisch geschlossen. Im Oktober klang das noch wie Zukunftsmusik, im Dezember haben das die neuesten Versionen von Chrome, Edge und Safari schon implementiert: <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML_details-6.html" width="900" height="600" name="SELFHTML_in_a_box"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/wiki/Infobox/Akkordeon_mit_details#Exklusives_Akkordeon">Exklusives Akkordeon</a> </p> </iframe> # Registerkarten Auch Registerkarten (*Tab Panels*) sind so möglich: <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML_details-7.html" width="900" height="400" name="SELFHTML_in_a_box"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/wiki/Infobox/Akkordeon_mit_details#Exklusives_Akkordeon">Exklusives Akkordeon</a> </p> </iframe> Für den Firefox und ältere Browserversionen helfen einige Zeilen Javascript! Das ausführliche Tutorial kannst du im SELF-Wiki lesen: [**Infobox/Akkordeon mit details**](https://wiki.selfhtml.org/wiki/Infobox/Akkordeon_mit_details) <hr> So endet 2023 mit einem wirklichen „Silvester-Knaller“ und wir können uns auf 2024 und viel Neues freuen!

# Exklusive Akkordeons Ein gängiges UI-Muster im Web ist eine Akkordeonkomponente (neudeutsch: Offenlegungs-Widget), die einzeln maximiert (oder minimiert) werden können, um ihren Inhalt ein- oder auszublenden. Dafür gibt es das native [details](https://wiki.selfhtml.org/wiki/HTML/Elemente/details)-Element. Eine Variante des Akkordeon-Musters ist das **exklusive Akkordeon**, bei dem nur eines der Offenlegungs-Widgets gleichzeitig geöffnet werden kann. Bis jetzt musste das mit viel JavaScript und noch mehr ARIA-Attributen von Hand nachgebaut werden. **Jetzt** gibt es die Möglichkeit, mehrere details-Elemente mit demselben name-Wert zu einer semantische Gruppe zusammenzufassen. Wenn du eines der details-Elemente aus der Gruppe öffnest, wird das zuvor geöffnete Element automatisch geschlossen. Im Oktober klang das noch wie Zukunftsmusik, im Dezember haben das die neuesten Versionen von Chrome, Edge und Safari schon implementiert: <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML_details-6.html" width="900" height="600" name="SELFHTML_in_a_box"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/wiki/Infobox/Akkordeon_mit_details#Exklusives_Akkordeon">Exklusives Akkordeon</a> </p> </iframe> # Registerkarten Auch Registerkarten (*Tab Panels*) sind so möglich: <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML_details-7.html" width="900" height="400" name="SELFHTML_in_a_box"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/wiki/Infobox/Akkordeon_mit_details#Exklusives_Akkordeon">Exklusives Akkordeon</a> </p> </iframe> Für den Firefox und ältere Browserversionen helfen einige Zeilen Javascript! Das ausführliche Tutorial kannst du im SELF-Wiki lesen: [**Infobox/Akkordeon mit details**](https://wiki.selfhtml.org/wiki/Infobox/Akkordeon_mit_details) <hr> So endet 2023 mit einem wirklichen „Silvester-Knaller“ und wir können uns auf 2024 und viel Neues freuen!