{ "$schema": "../../schemas/code-crispies-module-schema.json", "id": "html-details-summary", "title": "HTML Details & Summary", "description": "Erstelle aufklappbare Inhaltsbereiche ohne JavaScript", "mode": "html", "difficulty": "beginner", "lessons": [ { "id": "details-summary-basic", "title": "Dein erstes Aufklapp-Element", "description": "Das <details>-Element erstellt einen aufklappbaren Bereich. Das <summary> bietet die anklickbare Beschriftung.

Klicke auf die Zusammenfassung, um den versteckten Inhalt anzuzeigen - kein JavaScript nötig!", "task": "Erstelle ein <details>-Element mit:
1. Einem <summary> mit dem Text Klicken zum Aufklappen
2. Einem <p> mit dem Text Dieser Inhalt war versteckt!", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui; padding: 20px; } details { border: 1px solid #ddd; border-radius: 8px; padding: 15px; } summary { font-weight: 600; cursor: pointer; } summary:hover { color: #1976d2; } details p { margin-top: 15px; color: #666; }", "sandboxCSS": "", "initialCode": "", "solution": "
\n Klicken zum Aufklappen\n

Dieser Inhalt war versteckt!

\n
", "previewContainer": "preview-area", "validations": [ { "type": "element_exists", "value": "details", "message": "Füge ein <details>-Element hinzu" }, { "type": "element_exists", "value": "summary", "message": "Füge ein <summary> innerhalb von <details> hinzu" }, { "type": "parent_child", "value": { "parent": "details", "child": "summary" }, "message": "Das <summary> muss innerhalb von <details> sein" }, { "type": "parent_child", "value": { "parent": "details", "child": "p" }, "message": "Füge ein <p> innerhalb von <details> für den versteckten Inhalt hinzu" } ] }, { "id": "details-open-attribute", "title": "Standardmäßig geöffnet", "description": "Standardmäßig ist <details> geschlossen. Füge das open-Attribut hinzu, um den Inhalt initial anzuzeigen.

Dies ist ein boolesches Attribut - füge einfach open ohne Wert hinzu.", "task": "Füge das open-Attribut zum <details>-Element hinzu, um den Inhalt standardmäßig anzuzeigen.", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui; padding: 20px; } details { border: 1px solid #ddd; border-radius: 8px; padding: 15px; background: #f9f9f9; } summary { font-weight: 600; cursor: pointer; } details p { margin-top: 15px; color: #666; }", "sandboxCSS": "", "initialCode": "
\n FAQ: Was ist HTML5?\n

HTML5 ist die neueste Version des HTML-Standards mit neuen semantischen Elementen und APIs.

\n
", "solution": "
\n FAQ: Was ist HTML5?\n

HTML5 ist die neueste Version des HTML-Standards mit neuen semantischen Elementen und APIs.

\n
", "previewContainer": "preview-area", "validations": [ { "type": "attribute_value", "value": { "selector": "details", "attr": "open", "value": true }, "message": "Füge das open-Attribut zu <details> hinzu" } ] }, { "id": "faq-accordion", "title": "FAQ-Akkordeon", "description": "Mehrere <details>-Elemente erstellen ein Akkordeon-artiges FAQ. Jede Frage kann unabhängig aufgeklappt werden.

Pro-Tipp: Tippe details*3>summary+p und drücke Tab für Emmet-Expansion. Das *3 erstellt 3 Elemente, > geht eine Ebene tiefer, + fügt Geschwister hinzu.", "task": "Erstelle einen FAQ-Bereich mit:
1. Einer <h1> mit dem Text Häufig gestellte Fragen
2. Drei <details>-Elementen, jeweils mit einer Frage im <summary> und einer Antwort im <p>", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui; min-height: 100vh; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); display: flex; flex-direction: column; justify-content: center; padding: 40px; margin: 0; box-sizing: border-box; } h1 { font-size: 2.5rem; color: #4a4a4a; text-align: center; margin: 0 0 30px 0; } details { background: white; border-radius: 12px; margin-bottom: 15px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } summary { font-size: 1.3rem; font-weight: 600; color: #5c5c5c; cursor: pointer; list-style: none; } summary::before { content: '▸ '; color: #fcb69f; } details[open] summary::before { content: '▾ '; } details p { margin: 15px 0 0 0; color: #666; line-height: 1.6; }", "sandboxCSS": "", "initialCode": "", "solution": "

Häufig gestellte Fragen

\n\n
\n Was ist HTML5?\n

HTML5 ist die neueste Version von HTML mit neuen semantischen Elementen und APIs.

\n
\n\n
\n Brauche ich JavaScript?\n

Viele interaktive Funktionen funktionieren mit purem HTML5, kein JavaScript nötig!

\n
\n\n
\n Ist das barrierefrei?\n

Ja! Native HTML-Elemente haben eingebaute Tastatur- und Screenreader-Unterstützung.

\n
", "previewContainer": "preview-area", "validations": [ { "type": "element_exists", "value": "h1", "message": "Füge eine <h1>-Überschrift für den FAQ-Titel hinzu" }, { "type": "element_count", "value": { "selector": "details", "min": 3 }, "message": "Erstelle mindestens 3 <details>-Elemente für das FAQ" }, { "type": "element_count", "value": { "selector": "summary", "min": 3 }, "message": "Jedes <details> braucht ein <summary> für die Frage" }, { "type": "element_count", "value": { "selector": "details p", "min": 3 }, "message": "Jedes <details> braucht ein <p> für die Antwort" } ] } ] }