nicht angemeldet
Verbesserung zum Wiki-Artikel „Akkordeon mit details“
Matthias Scharwies
Rolf BBetr: 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!
-
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
--
Was ist eine Signatur?-
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
--
sumpsi - posui - obstruxi-
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
--
Was ist eine Signatur? -
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
--
Was ist eine Signatur?
-
-
Betr: https://wiki.selfhtml.org/wiki/Infobox/Akkordeon_mit_details#Registerkarten
Gute Nachricht: Das name-Attribut geht jetzt in allen modernen Browsern (Caniuse) - wir brauchen also gar kein JavaScript mehr.
Hallo zusammen.
Das Problem hier: Klickt man zweimal auf das Summary-Element verschwindet der Kontext. Das entspricht nicht der Funktion von Registern! Warum als nicht zwei zusätzliche Zeilen Javascript (ist gleichzeitig Fallback).
Safari kennt 'list-style:none' nicht.
Ohne weiteres Zutun zeigt der Cursor auf dem Summary-Element nur den normalen Zeiger (zumindest bei meinem FF).
Ich habe das Beispiel überarbeitet:
<!DOCTYPE html> <html> <head> <title>Tabs mit Details-Element</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .tabs { margin:0px; font:normal 1em sans-serif; position: relative; min-height: 15em; width: 40em; } .tabs details { display: inline-block; } .tabs summary { background-color: lightgrey; border: thin solid black; border-radius: .5em .5em 0 0; list-style:none; height:20px; cursor:pointer; padding: .5em .5em 10px; } /* forces 'Safari' to hide Marker */ .container summary::-webkit-details-marker { display: none; } .tabs summary:focus, .tabs summary:hover { background-color: silver; } .tabs details[open] > summary { background: white; color:#888; border-bottom-color:white; cursor:default; } .tabs .content { position: absolute; left: 0; top:39px; background: white; border: thin solid black; border-radius:0 .5em .5em; padding: .5em; z-index:-1; } </style> </head> <body> <div class="tabs"> <details name="tab" open> <summary> Registerkarten</summary> <div class="content"> <p>Unter <strong>dynamischen Tabs</strong> (engl. <em>Tabbed interfaces</em> oder <em>Tab Panels</em>) versteht man das Präsentieren von Inhalten in Registerkarten. Reiter wie in einer Hängeregistratur verweisen auf die vorhandenen Registerkarten. Da nur die ausgewählte Registerkarte angezeigt wird, ist dies eine platzsparende, übersichtliche und visuell intuitive Art Inhalte zu präsentieren.</p> </div> </details> <details name="tab"> <summary> Standardverhalten</summary> <div class="content"> <p>Wenn Sie mehrere details-Elemente über ein gemeinsames name-Attribut verbinden, werden beim Öffnen eines details-Elements bereits geöffnete details-Elemente ohne weiteres Zutun geschlossen.</p> <p>Dies funktioniert (Stand: September 2024) in allen modernen Browsern.</p> </div> </details> <details name="tab"> <summary> Barrierefreiheit </summary> <div class="content"> <p>Registerkarten müssen von allen bedienbar sein: egal ob durch Touch, mit der Maus, aber auch mit der Tastatur - z.B. mit der Tab-Taste .</p> <p>Alles kein Problem mit dem details-Element!</p> </div> </details> </div> <script type="text/javascript"> (function(){ 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; } else { elm.open = true; event.preventDefault(); }; }); } })() </script> </body> </html>-
Hallo Jo Klimek,
danke für die Anregung.
Safari kennt 'list-style:none' nicht.
Deswegen ja
/* forces 'Safari' to hide Marker */ .container summary::-webkit-details-marker { display: none; }Klappt das nicht?
Rolf
--
sumpsi - posui - obstruxi
-
-