Softonic

CSS-Accordion-Generator

Schritt 1 / 4 Inhalt

Accordion-Inhalt

Geben Sie Überschriften und Panelinhalte als Klartext ein. HTML-ähnlicher Text wird im erzeugten Code maskiert.

Ihre Accordion-Texte und Einstellungen bleiben in diesem Browser-Tab. Sie werden weder über Livewire gesendet noch in die URL geschrieben oder hochgeladen. Beim Schließen des Tabs wird der gespeicherte Funnel-Status gelöscht.

Erstellen Sie ein Accordion mit drei Abschnitten aus semantischen <details>- und <summary>-Elementen. Bearbeiten Sie Überschriften und Panels als Klartext, wählen Sie Farben und Abstände, testen Sie die Tastaturbedienung in der Vorschau und kopieren Sie anschließend das maskierte HTML und CSS oder laden Sie eine eigenständige Datei herunter. Der Editor läuft vollständig in Ihrem Browser-Tab.

So erstellen Sie ein CSS-Accordion

  1. 1

    Drei Abschnitte schreiben

    Fügen Sie jedem Element eine kurze Überschrift und einen Paneltext hinzu. HTML-ähnliche Eingaben werden maskiert und nicht ausgeführt.

  2. 2

    Design auswählen

    Legen Sie vier sechsstellige Farben, einen Eckenradius von 0 bis 24 px und einen Innenabstand von 8 bis 32 px fest.

  3. 3

    Verhalten festlegen

    Lassen Sie mehrere Panels geöffnet oder verwenden Sie für eine exklusive Gruppe das native `name`-Attribut. Wählen Sie einen Winkelpfeil oder Plus/Minus.

  4. 4

    Testen und exportieren

    Probieren Sie die Live-Vorschau mit Zeiger und Tastatur aus. Kopieren Sie dann den Ausschnitt oder laden Sie eine UTF-8-HTML-Datei herunter.

Was der Generator ausgibt

Jedes Element verwendet die nativen Offenlegungselemente des Browsers:

<details class="generated-accordion" open>
  <summary>Was ist enthalten?</summary>
  <div class="generated-accordion__panel">Fügen Sie hier die Informationen ein.</div>
</details>

Das erzeugte CSS gestaltet Rahmen, Überschriftenhintergrund, Text, Fokusring, Abstände, Ecken und Indikator. Es nutzt logische Eigenschaften wie margin-inline-start und enthält Regeln für den Indikator in Rechts-nach-links-Layouts. Eine Media Query für reduzierte Bewegung entfernt den Symbolübergang, wenn Besucher weniger Bewegung wünschen.

Mehrere oder nur ein geöffnetes Panel

Einstellung Erzeugtes Markup Ergebnis
Mehrere Panels Kein gemeinsames name Jedes Element schaltet unabhängig um
Ein Panel Dasselbe name="generated-accordion" für alle Elemente Das Öffnen eines Elements schließt in unterstützten Browsern ein anderes

Die Option für nur ein geöffnetes Panel verwendet das native name-Attribut von details. Ältere Browser ohne Unterstützung für exklusive Gruppen zeigen weiterhin ein nutzbares Accordion, lassen aber möglicherweise mehrere Elemente geöffnet.

Sicherer Klartext

Überschriften und Panels werden als Text behandelt. Zeichen wie <, >, &, Anführungszeichen und Apostrophe werden im exportierten Ausschnitt als HTML maskiert. Ein eingefügtes Tag wird daher als Text angezeigt und nicht als ausführbares Markup. Falls ein Panel Links, Listen oder andere Formatierungen benötigt, ergänzen Sie das geprüfte Markup nach dem Export selbst.

Barrierefreiheit vor der Veröffentlichung prüfen

  • Navigieren Sie mit Tab zu jeder summary und schalten Sie sie mit Enter oder Leertaste um.
  • Prüfen Sie die Fokusfarbe sowohl vor dem Überschriften- als auch vor dem Seitenhintergrund.
  • Halten Sie Überschriften kurz und beantworten Sie sie im Panel eindeutig.
  • Testen Sie Zoom, schmale Bildschirme und Rechts-nach-links-Seiten im Ziel-Layout.
  • Verstecken Sie die wichtigste Anweisung der Seite nicht in einem geschlossenen Accordion.

Häufig gestellte Fragen

Nein. Das Öffnen und Schließen erfolgt über das native Verhalten von <details> und <summary>. Die heruntergeladene Komponente enthält nur HTML und CSS.

Ja. Wählen Sie die Einstellung für ein einzelnes Panel. Der Generator gibt allen drei <details>-Elementen dasselbe name-Attribut. Browser ohne Unterstützung für exklusive details-Gruppen verwenden unabhängig schaltbare Panels als Rückfall.

Der Editor behandelt Eingaben bewusst als Klartext und maskiert HTML-Zeichen. Dadurch wird eingefügtes Markup weder in der Vorschau noch im erzeugten Ausschnitt ausgeführt. Ergänzen Sie bei Bedarf erst nach dem Export geprüftes Rich-Text-Markup.

Nein. Texte, Einstellungen, Vorschau, Kopieren und Download bleiben im Browser. Im mehrseitigen Funnel wird der temporäre Zustand im sessionStorage des aktuellen Tabs gehalten und nicht in die URL geschrieben.

Verwandte Tools

Zufallsbuchstaben-Generator

Erzeugen Sie zufällige A-Z-Buchstaben. Wählen Sie Anzahl, Großschreibung, Kleinschreibung oder gemischte Schreibweise für Spiele, Aufgaben und Unterricht.

Binär-zu-ASCII-Konverter

Fügen Sie Binärdaten (durch Leerzeichen getrennte Bytes oder einen langen Bitstrom) ein und erhalten Sie den ASCII-Text, den sie darstellen. Unterstützt 7-Bit- und 8-Bit-Codierungen.

JSON-Formatierer

Fügen Sie JSON ein, um es mit 2 oder 4 Leerzeichen lesbar zu formatieren, kompakt zu minifizieren oder vor dem Kopieren schnell die Syntax zu prüfen.

Zufälliger Farbgenerator

Erzeuge 1 bis 50 zufällige HEX-Farben mit Farbfeldern zum Prüfen, Kopieren und Verwenden in CSS, Tests oder Palettenideen.

Base64 zu Hex-Konverter

Konvertieren Sie einen Base64-String in seine zugrunde liegenden Bytes, die als Hexadezimal dargestellt werden. Nützlich zum Überprüfen von Tokens, Schlüsseln, Zertifikaten und JWTs.

Binär zu Dezimal

Konvertieren Sie Binärzahlen sofort in Dezimalzahlen. Zeigt die Positionsausweitung, damit Sie sehen können, wie jedes Bit beiträgt.