Ein PE-Akkordeon erstellen
Erstellen Sie ein Akkordeon, das ohne JavaScript funktioniert, und erweitern Sie es anschließend
Ein PE-Akkordeon erstellen ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Ziel: Ein funktionierendes Akkordeon ohne JS
Die PE-Version eines Akkordeons verwendet ausschließlich HTML – die nativen Elemente <details> und <summary>. Klicken Sie auf summary, um das Panel umzuschalten. Sie funktioniert ohne CSS, JS oder Framework, da sie in HTML integriert ist.
<details>
<summary>What is HTML?</summary>
<p>HTML is the markup language of the web.</p>
</details>Integrierte Barrierefreiheit
<summary> ist eine fokussierbare, per Tastatur aktivierbare Schaltfläche (Enter/Leertaste schaltet um). Screenreader geben den erweiterten bzw. reduzierten Zustand aus. Zwei HTML-Elemente leisten das, wofür ein eigenes React-Akkordeon Dutzende Zeilen mit ARIA- und Event-Handling benötigen kann.
CSS-Ebenen
Gestalten Sie das Aufklappdreieck, den Innenabstand des Panels und die Übergänge mit normalem CSS. Das Attribut open bildet den Zustand ab, daher wird details[open] summary { color: blue; } nur im erweiterten Zustand angewendet. Für die visuelle Gestaltung ist kein JS erforderlich.
details { border-bottom: 1px solid #ccc; padding: 8px 0; }
summary { font-weight: bold; cursor: pointer; }
details[open] summary { color: var(--accent); }Öffnen und Schließen animieren
Das standardmäßige Öffnen und Schließen erfolgt sofort. Animieren Sie es, indem Sie die content-visibility-Eigenschaft per Transition ändern oder per JS die Panelhöhe messen und max-height animieren. Für einfache Fälle ist das abrupte Umschalten akzeptabel; die Animation ist eine progressive Erweiterung mit CSS+JS.
Mit JavaScript erweitern
JS kann praktische Zusatzfunktionen hinzufügen: andere Akkordeons schließen, sobald eines geöffnet wird (Einzelöffnungsmodus), den geöffneten Zustand in localStorage speichern, den Übergang animieren oder per Analytics erfassen, welche Einträge erweitert wurden. Jede Erweiterung ist rein ergänzend.
document.querySelectorAll("details").forEach((d) => {
d.addEventListener("toggle", () => {
if (d.open) {
document.querySelectorAll("details").forEach((o) => {
if (o !== d) o.removeAttribute("open");
});
}
});
});Das toggle-Ereignis
<details> löst jedes Mal ein toggle-Ereignis aus, wenn sich sein geöffneter Zustand ändert. Verwenden Sie es, um auf das Öffnen durch den Benutzer zu reagieren, ohne Click-Handler neu zu verdrahten. Es ist sowohl mit Mausklicks als auch mit Tastaturaktivierung kompatibel.
Zustand beim serverseitigen Rendern
Um ein anfangs geöffnetes Akkordeon zu rendern, setzen Sie das Attribut open serverseitig: <details open>. Der Zustand befindet sich im HTML und ist für Crawler sowie für Benutzer mit langsamen Verbindungen verfügbar, bevor JS ausgeführt wird.
Wenn die integrierte Lösung nicht ausreicht
Wenn das Design ein eigenes Symbol zum Erweitern und Reduzieren, eine animierte Anzeige oder ein mehrspaltiges Panel erfordert, erstellen Sie eine eigene Version – verwenden Sie jedoch nach Möglichkeit <details>/<summary> als zugrunde liegende Struktur. Fügen Sie ARIA nur hinzu, wenn Sie die nativen Elemente überhaupt nicht verwenden können.
Überprüfung ohne JS
Deaktivieren Sie JavaScript in den DevTools und prüfen Sie, ob das Akkordeon weiterhin funktioniert: Klicken Sie auf summary, das Panel wird umgeschaltet, die Fokusreihenfolge bleibt logisch und die Tastatur aktiviert es. Wenn etwas nicht funktioniert, ist JS keine Erweiterung, sondern eine Voraussetzung – das verstößt gegen PE.
CSS-only-Einzelöffnung
Für das Verhalten „immer nur eines geöffnet“ ohne JS verwenden Sie das Attribut name bei <details> (in Chrome/Safari unterstützt): Alle <details name="faq"> teilen sich einen Zustand, sodass das Öffnen eines Elements die anderen schließt. Ein reines HTML-Muster, das Radiobuttons nachbildet.
Migration von einem reinen JS-Akkordeon
Ersetzen Sie divs+JS durch <details>/<summary> und behalten Sie die CSS-Klassen für die Gestaltung bei. Das Ergebnis enthält weniger HTML, ist nicht von JS abhängig, zugänglicher und kann von Suchmaschinen indexiert werden. Die meisten JS-Akkordeons lassen sich mit minimalen sichtbaren Änderungen für Benutzer auf PE umstellen.
Wissensabfrage
Welches HTML-Elementpaar stellt ohne JavaScript ein vollständig funktionierendes Akkordeon bereit?
Zusammenfassung
Ein PE-Akkordeon verwendet <details>/<summary> als Grundlage – vollständig zugänglich und ohne JS per Tastatur bedienbar. Ergänzen Sie CSS für die visuelle Gestaltung und optional JS für Animationen oder das Verhalten „immer nur eines geöffnet“. Überprüfen Sie durch Deaktivieren von JS, dass die Grundlage weiterhin funktioniert. Das neue Attribut name ermöglicht sogar einen CSS-only-Einzelöffnungsmodus.
Häufig gestellte Fragen
Ist die Lektion „Ein PE-Akkordeon erstellen“ kostenlos?
Ja — der vollständige Text von „Ein PE-Akkordeon erstellen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Ein PE-Akkordeon erstellen“?
Erstellen Sie ein Akkordeon, das ohne JavaScript funktioniert, und erweitern Sie es anschließend Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Ein PE-Akkordeon erstellen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Die PE-Philosophie: Mit HTML beginnen
- Feature Detection gegenüber Browser-Sniffing
- Graceful Degradation gegenüber Progressive Enhancement
- Ein PE-Akkordeon erstellen