|$ curl https://forge-ai.dev/api/markdown?path=docs/html/details
$cat docs/details/summary-element.md
updated Recently·12 min read·published
Details/Summary Element
◆HTML◆Beginner
Introduction
The <details> and <summary> elements create a native disclosure widget — an expandable/collapsible section without JavaScript. The <summary> provides the visible heading, and the rest of the content becomes the expandable region.
Basic Usage
The simplest disclosure widget uses a <details> wrapper with a <summary> as the first child.
details-basic.html
HTML
| 1 | <details> |
| 2 | <summary>Click to expand</summary> |
| 3 | <p>This content is hidden by default.</p> |
| 4 | <ul> |
| 5 | <li>Item one</li> |
| 6 | <li>Item two</li> |
| 7 | </ul> |
| 8 | </details> |
The Open Attribute
Add the open attribute to render the details expanded by default.
details-open.html
HTML
| 1 | <details open> |
| 2 | <summary>FAQ: How does it work?</summary> |
| 3 | <p>The <code>open</code> attribute keeps the content visible on page load.</p> |
| 4 | </details> |
ℹ
info
Use CSS to style the disclosure marker with ::details-marker pseudo-element. Rotate it with transform for custom toggle animations.
Styling
Customize the appearance using CSS pseudo-elements and [open] attribute selector.
details-styles.css
CSS
| 1 | summary { |
| 2 | cursor: pointer; |
| 3 | padding: 0.5em; |
| 4 | background: #f5f5f5; |
| 5 | border-radius: 4px; |
| 6 | } |
| 7 | |
| 8 | summary::marker { |
| 9 | color: #00FF41; |
| 10 | } |
| 11 | |
| 12 | details[open] summary { |
| 13 | background: #e0e0e0; |
| 14 | } |