jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML-Tools

Kostenlose HTML-Details-Akkordeon-Generator

Generiere FAQ-Akkordeons mit den nativen details- und summary-Elementen ohne JavaScript.

Tool wird geladen...

Was ist HTML-Details-Akkordeon-Generator?

Die Elemente details und summary erstellen native ausklappbare Panels in HTML. Der summary ist immer sichtbar und fungiert als Umschalter. Beim Klicken wird der restliche details-Inhalt aufgeklappt. Mehrere offene details können exklusiv sein, was Akkordeon-Verhalten erzeugt, mithilfe des name-Attributs. Dies funktioniert ohne JavaScript.

Kurze Antwort

Verwenden Sie die nativen HTML-Elemente details und summary, um ein Akkordeon zu erstellen, das ohne JavaScript funktioniert. Jedes details-Element ist unabhängig und kann vom Benutzer geöffnet oder geschlossen werden.

Last updated: 2026-05-25

Einschränkungen

  • Native details-Elemente unterstützen das automatische Schließen beim Öffnen eines anderen nicht ohne JavaScript oder das name-Attribut.
  • Das open-Attribut steuert nur, ob das details-Element aufgeklappt startet. Es gibt keine teilweise Aufklappmöglichkeit.
  • Safari 17 und niedriger unterstützt keine Animation des details-Elements.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Geben Sie die Akkordeon-Einträge als Titel|Inhalt-Paare ein, einer pro Zeile.
  2. Wählen Sie den exklusiven oder Mehrfach-Öffnungsmodus für das Akkordeon-Verhalten.
  3. Das Tool generiert das details/summary-HTML mit CSS-Styling.
  4. Kopieren Sie das Markup und CSS in Ihre Seite.

Wofür du es nutzen kannst

  • Erstellen Sie ein FAQ-Akkordeon für eine Produkt- oder Dienstleistungsseite.
  • Bauen Sie ausklappbare Dokumentationsabschnitte für eine Referenzseite.
  • Fügen Sie erweiterbare Inhaltsblöcke zu einem Blogbeitrag hinzu.

Anwendungsfalle

Praxisbeispiele

Beispiel

FAQ-Seite mit exklusivem Akkordeon

Eine FAQ-Seite verwendet den exklusiven Akkordeon-Modus, sodass das Öffnen einer Frage die anderen schließt. Das name-Attribut auf jedem details-Element erzwingt dieses Verhalten.

Beispiel

Rezeptseite mit ausklappbaren Abschnitten

Eine Rezeptseite verwendet ausklappbare Abschnitte für Zutaten und Anleitung. Jeder Abschnitt öffnet unabhängig im Mehrfach-Öffnungsmodus.

Haufige Fehler

  • Das standardmäßige Dreieck-Symbol zu verstecken, ohne einen sichtbaren Umschalt-Indikator bereitzustellen.
  • details für kritische Inhalte zu verwenden, die immer sichtbar sein müssen.
  • Das summary-Element nicht als klickbar zu gestalten.

Überprüfung

  1. Klicken Sie jeden Akkordeon-Abschnitt, um zu prüfen, ob er unabhängig ohne JavaScript-Fehler öffnet und schließt.
  2. Testen Sie die Seite mit deaktiviertem JavaScript, um zu bestätigen, dass das Akkordeon als progressive Enhancement funktioniert.

FAQ

Fragen zu HTML-Details-Akkordeon-Generator

Wie mache ich nur ein details gleichzeitig geöffnet?

Fügen Sie dasselbe name-Attribut zu jedem details-Element hinzu. Dies erzeugt exklusives Akkordeon-Verhalten.

Funktioniert das details-Element in allen Browsern?

Chrome 12+, Edge 79+, Safari 6+, Firefox 49+. Es hat nahezu universelle Unterstützung.

Wie animiere ich das Öffnen und Schließen eines details-Elements?

Das native Öffnen/Schließen kann nicht fließend mit reinem CSS animiert werden. Sie können die Höhe mit dem ::details-content-Pseudo-Element in neueren Browsern animieren oder ein kleines JavaScript-Snippet verwenden.

Kann ich details für einen FAQ-Bereich mit mehreren Einträgen verwenden?

Ja. Mit name-Attributen auf details-Elementen entsteht exklusives Akkordeon-Verhalten. Jedes details-Element umfasst eine Frage (in summary) und ihre Antwort. Screenreader erkennen den aufgeklappten/zugeklappten Status nativ.

Verwandte Tools

Weitere html-tools

Auch ausprobieren

Auch ausprobieren