HTML Details / Summary Generator
Natives Akkordeon-Element ohne JavaScript. Klick auf das <summary> öffnet/schließt den Inhalt.
Anwendung & Beispiele
Ideal für FAQ-Listen, Spoiler oder lange Erklärungen, die optional ausklappbar sein sollen. Browser-Default-Pfeil per CSS umstilbar.
FAQ
Kann ich mehrere <details> als Akkordeon gruppieren?
Mit name="group" (HTML 2024+): nur ein Element der Gruppe kann gleichzeitig offen sein. Für ältere Browser brauchst du JavaScript.
Wie style ich den Aufklapp-Pfeil?
summary { list-style: none; } blendet ihn aus. Per summary::-webkit-details-marker { display: none; } und eigenem Pfeil (z.B. SVG oder ::after) hast du volle Kontrolle.
Funktioniert <details> als FAQ-Lösung?
Ja — perfekt für FAQ-Listen ohne JavaScript. Suchmaschinen indexieren auch geschlossene Details, der Inhalt liegt im DOM. Ergänze JSON-LD FAQPage für Rich Snippets.
Wofür sind ID, Class und Title?
id identifiziert ein Element eindeutig (für CSS, JS, Anker-Links). class erlaubt CSS-Styling, mehrere Klassen werden mit Leerzeichen getrennt. title erzeugt einen Tooltip beim Hover.
Funktioniert der Code in allen Browsern?
Alle hier erzeugten Elemente sind valides HTML5 und werden in allen modernen Browsern (Chrome, Firefox, Safari, Edge, Opera) unterstützt. Bei sehr alten Browsern (z.B. IE 11) kann es bei einzelnen Input-Typen wie color oder date Einschränkungen geben.