110 lines
11 KiB
JSON
110 lines
11 KiB
JSON
{
|
|
"$schema": "../schemas/code-crispies-module-schema.json",
|
|
"id": "html-details-summary",
|
|
"title": "HTML Details & Summary",
|
|
"description": "Create expandable content sections without JavaScript",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "details-summary-basic",
|
|
"title": "First Widget",
|
|
"description": "The <kbd><details></kbd> element creates a collapsible section. The <kbd><summary></kbd> provides the clickable label.<br><br>Click the summary to toggle the hidden content - no JavaScript needed!",
|
|
"task": "Create a <kbd><details></kbd> element with:<br>1. A <kbd><summary></kbd> saying <code>Click to reveal</code><br>2. A <kbd><p></kbd> with the text <code>This content was hidden!</code>",
|
|
"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": "<details>\n <summary>Click to reveal</summary>\n <p>This content was hidden!</p>\n</details>",
|
|
"previewContainer": "preview-area",
|
|
"concept": {
|
|
"explanation": "The details element is a native disclosure widget built into HTML5, meaning the browser handles all the show/hide logic without requiring JavaScript or CSS. When clicked, the browser toggles an internal 'open' state and applies native styling (like the disclosure triangle). This makes it accessible by default—screen readers announce it as an expandable section, and keyboard users can activate it with Enter or Space. The summary acts as a button that controls visibility of all sibling content inside the details element.",
|
|
"diagram": "Details/Summary Structure\n\n┌─────────────────────────────┐\n│ <details> │ ← Container\n│ ▸ <summary>Question</summary> │ ← Clickable toggle\n│ <!-- Hidden content --> │ (Browser renders ▸/▾)\n│ <p>Answer text...</p> │\n│ </details> │\n└─────────────────────────────┘\n\nClosed State (default):\n▸ Question\n\nOpen State:\n▾ Question\nAnswer text...\n\nBrowser Responsibilities:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n✓ Click handling\n✓ Keyboard support (Enter/Space)\n✓ Toggle arrow rendering\n✓ Screen reader announcements\n✓ Content show/hide\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
|
},
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "details",
|
|
"message": "Add a <kbd><details></kbd> element"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "summary",
|
|
"message": "Add a <kbd><summary></kbd> inside the details"
|
|
},
|
|
{
|
|
"type": "parent_child",
|
|
"value": { "parent": "details", "child": "summary" },
|
|
"message": "The <kbd><summary></kbd> must be inside <kbd><details></kbd>"
|
|
},
|
|
{
|
|
"type": "parent_child",
|
|
"value": { "parent": "details", "child": "p" },
|
|
"message": "Add a <kbd><p></kbd> inside <kbd><details></kbd> for the hidden content"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "details-open-attribute",
|
|
"title": "Pre-expanded Details",
|
|
"description": "By default, <kbd><details></kbd> is closed. Add the <kbd>open</kbd> attribute to show the content initially.<br><br>This is a boolean attribute - just add <kbd>open</kbd> without a value.",
|
|
"task": "Add the <kbd>open</kbd> attribute to the <kbd><details></kbd> element to show the content by default.",
|
|
"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": "<details>\n <summary>FAQ: What is HTML5?</summary>\n <p>HTML5 is the latest version of the HTML standard with new semantic elements and APIs.</p>\n</details>",
|
|
"solution": "<details open>\n <summary>FAQ: What is HTML5?</summary>\n <p>HTML5 is the latest version of the HTML standard with new semantic elements and APIs.</p>\n</details>",
|
|
"previewContainer": "preview-area",
|
|
"concept": {
|
|
"explanation": "Boolean attributes in HTML represent on/off states where presence equals true. The 'open' attribute tells the browser to render the details element in its expanded state on page load, but users can still collapse it by clicking. This is different from CSS display control—removing the attribute doesn't hide the element entirely, it just sets the initial collapsed state. JavaScript can dynamically add/remove this attribute to programmatically control the disclosure state, which fires a 'toggle' event that developers can listen to.",
|
|
"diagram": "Boolean Attribute Behavior\n\nHTML Boolean Attributes:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n<details open> → Expanded\n<details> → Collapsed\n<input required> → Must be filled\n<input> → Optional\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nThe 'open' Attribute:\n\n┌─────────────────────────────┐\n│ <details open> │ ← Attribute present\n│ ▾ Summary │ = Show content\n│ Content visible │\n│ </details> │\n└─────────────────────────────┘\n\n┌─────────────────────────────┐\n│ <details> │ ← Attribute absent\n│ ▸ Summary │ = Hide content\n│ </details> │\n└─────────────────────────────┘\n\nDynamic Control:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nJS: element.open = true → Expand\nJS: element.open = false → Collapse\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
|
},
|
|
"validations": [
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "details", "attr": "open", "value": true },
|
|
"message": "Add the <kbd>open</kbd> attribute to <kbd><details></kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "faq-accordion",
|
|
"title": "FAQ Accordion",
|
|
"description": "Multiple <kbd><details></kbd> elements create an accordion-style FAQ. Each question can be expanded independently.<br><br><b>Pro tip:</b> Type <kbd>details*3>summary+p</kbd> and press Tab for Emmet expansion. <kbd>*3</kbd> creates 3 elements, <kbd>></kbd> nests inside, <kbd>+</kbd> adds siblings.",
|
|
"task": "Create an FAQ section with:<br>1. An <kbd><h1></kbd> saying <code>Frequently Asked Questions</code><br>2. Three <kbd><details></kbd> elements, each with a question in <kbd><summary></kbd> and an answer in <kbd><p></kbd>",
|
|
"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": "<h1>Frequently Asked Questions</h1>\n\n<details>\n <summary>What is HTML5?</summary>\n <p>HTML5 is the latest version of HTML with new semantic elements and APIs.</p>\n</details>\n\n<details>\n <summary>Do I need JavaScript?</summary>\n <p>Many interactive features work with pure HTML5, no JavaScript required!</p>\n</details>\n\n<details>\n <summary>Is this accessible?</summary>\n <p>Yes! Native HTML elements have built-in keyboard and screen reader support.</p>\n</details>",
|
|
"previewContainer": "preview-area",
|
|
"concept": {
|
|
"explanation": "Unlike many JavaScript accordion libraries that only allow one open panel at a time, native details elements are independent by default—users can open as many as they want simultaneously. This behavior is more user-friendly because it doesn't force users to lose their place when exploring multiple topics. Each details element maintains its own open/closed state in the DOM, so users can bookmark or reload the page and the browser may restore the state. The lack of mutual exclusivity is a feature, not a bug—if you need exclusive accordion behavior, you must add JavaScript to close siblings when one opens.",
|
|
"diagram": "Independent Accordion Pattern\n\nTraditional JS Accordion (Exclusive):\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n▸ Question 1\n▾ Question 2 ← Only one can be\n Answer... open at a time\n▸ Question 3\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nNative Details (Independent):\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n▾ Question 1 ← Multiple can be\n Answer... open at once\n▾ Question 2 (User choice!)\n Answer...\n▸ Question 3\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nBenefits:\n✓ Compare multiple answers\n✓ Print all expanded content\n✓ No state management complexity\n✓ Browser handles persistence\n\nTo Make Exclusive:\nAdd JS to listen for 'toggle' event\nand close siblings when one opens"
|
|
},
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "h1",
|
|
"message": "Add an <kbd><h1></kbd> heading for the FAQ title"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "details", "min": 3 },
|
|
"message": "Create at least 3 <kbd><details></kbd> elements for the FAQ"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "summary", "min": 3 },
|
|
"message": "Each <kbd><details></kbd> needs a <kbd><summary></kbd> for the question"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "details p", "min": 3 },
|
|
"message": "Each <kbd><details></kbd> needs a <kbd><p></kbd> for the answer"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|