Verbesserung zum Wiki-Artikel „Akkordeon mit details“

[Jo Klimek]

Betr: https://wiki.selfhtml.org/wiki/Infobox/Akkordeon_mit_details#Registerkarten

Das Javascript für die Registerkarten lässt sich wesentlich kürzer und eleganter gestalten:

var tabs = document.querySelector('.tabs');
	  tabs.addEventListener('click' , toggler);

function toggler(event){
    let target = event.target.closest('details');
    tabs.querySelectorAll('details').forEach(elm => {
						if(elm !== target) elm.open = false;
					}) 
}

So vermeidet man das jedem <details> Element ein 'EventListener' zugeordnet wird!

[Matthias Scharwies]

Servus!

Betr: https://wiki.selfhtml.org/wiki/Infobox/Akkordeon_mit_details#Registerkarten

Das Javascript für die Registerkarten lässt sich wesentlich kürzer und eleganter gestalten:

Ja, stimmt!

Gute Nachricht: Das name-Attribut geht jetzt in allen modernen Browsern (Caniuse) - wir brauchen also gar kein JavaScript mehr.

Ich werde den Artikel bei Gelegenheit entrümpeln!

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

bei der Gelegenheit hab ich nochmal das animierte details-Element angeschaut. Ohne Javascript scheint's immer noch nicht zu gehen, auch wenn bei dev.to jemand letztes Jahr eine „tolle Idee“ gepostet hat, wie man das mit CSS macht.

Letztlich ist es aber ein unbedienbarer, unzugänglicher Checkbox Hack. Aua. Ich habe das entsprechend böse kommentiert. Bisher dachte ich, dass dev.to Anspruch an qualititativ hochwertigen Inhalt hat 😟

Unsere Lösung ist zugänglicher, krankt aber daran, dass sie mit Änderungen der Viewportgröße nicht zurecht kommt. Da muss ein ResizeObserver rein, und das Ausmessen darf nicht beim Laden der Seite passieren, sondern direkt vor dem Öffnen/Schließen.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

bei der Gelegenheit hab ich nochmal das animierte details-Element angeschaut. Ohne Javascript scheint's immer noch nicht zu gehen,

Unsere Lösung ist zugänglicher, krankt aber daran, dass sie mit Änderungen der Viewportgröße nicht zurecht kommt.

Ja, das Problem der magic numbers.

Da muss ein ResizeObserver rein, und das Ausmessen darf nicht beim Laden der Seite passieren, sondern direkt vor dem Öffnen/Schließen.

Das wäre gut - ich schaff's zeitlich aber nicht.

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Hallo Matthias,

bei der Gelegenheit hab ich nochmal das animierte details-Element angeschaut. Ohne Javascript scheint's immer noch nicht zu gehen,

Stephanie Stimac hat in ihrem Blog folgendes gepostet:

The <details> and <summary> elements are getting an upgrade

Es geht um einige Vorschläge der open-ui, die mit Chrome 131 implementiert werden. Auf die Schnelle habe ich aber nur gefunden, dass man Animation ermöglichen will, aber nicht mit dem :part-Pseudoselektor.

[EDIT] mit ::details-content:

:root {
  interpolate-size: allow-keywords;
}

details {
  --open-close-duration: 500ms;
}

details::details-content {
  opacity: 0;
  height: 0;
  overflow-y: hidden; /* clip content when height is animating */
  transition: content-visibility var(--open-close-duration) allow-discrete,
              opacity var(--open-close-duration),
              height var(--open-close-duration);
}

details[open]::details-content {
  opacity: 1;
  height: auto;
}

[/EDIT]

Mal schauen, was da noch kommt!

Herzliche Grüße

Matthias Scharwies