## name attribute = accordion Adding the same `name="x"` to multiple `

` elements turns them into a single-open accordion — opening one closes the others. Pure HTML. ## ::details-content (modern browsers) The `::details-content` pseudo-element styles the body of an open details element. Combine with `interpolate-size: allow-keywords` to animate `height: auto`. ## Open by default Add the `open` attribute to render the content visible on page load. JavaScript can set/remove it to control state. ::example{slug="basic-details" title="Plain details / summary" difficulty=intro language=combined} ```html

What is Chiron?

A multi-language interactive learning platform. Concepts, examples, tracks.

How are runners sandboxed?

JS via dynamic-function evaluation in a captured-console scope. HTML/CSS via iframe srcdoc.

``` ```css body { font-family: system-ui, sans-serif; background: #1a1610; color: #f4ecd8; padding: 24px; } details { border: 1px solid #2a2218; border-radius: 4px; padding: 8px 12px; margin-bottom: 8px; background: #0f0d09; } summary { cursor: pointer; font-weight: 600; color: #e9b454; } details[open] summary { margin-bottom: 8px; } ``` ```explain Each disclosure renders collapsed with only the `

` visible and a default triangle marker; clicking a summary toggles its `

` open or shut independently, with no JavaScript and full keyboard/screen-reader support built in. ``` :: ::example{slug="accordion" title="Same-name accordion" difficulty=working language=combined} ```html

Question 1

Answer 1

Question 2

Answer 2

Question 3

Answer 3

``` ```css body { font-family: system-ui, sans-serif; background: #1a1610; color: #f4ecd8; padding: 24px; } details { border: 1px solid #2a2218; border-radius: 4px; padding: 8px 12px; margin-bottom: 4px; background: #0f0d09; } summary { cursor: pointer; color: #e9b454; } ``` ```explain Because all three `

` share `name="faq"`, the group is exclusive — opening one panel auto-closes whichever was open, so at most one answer shows at a time. All three start collapsed since none carries the `open` attribute. ``` :: The `name` attribute does more than group — it makes a group *exclusive*: at most one panel is open at a time, just like a radio-button set. Pair it with the `open` attribute so the group starts on a chosen panel, and style `::marker` (or hide it for a custom indicator) to brand the disclosure triangle. ::example{slug="exclusive-accordion-open-default" title="Exclusive accordion, one panel open on load" difficulty=working language=combined} ```html

Getting started

This panel is open on load because it carries the open attribute.

Configuration

Opening me auto-closes the others — the shared name="docs" makes the group exclusive, like radio buttons.

Troubleshooting

Only one panel in the group can be open at any time. No JavaScript required.

``` ```css body { font-family: system-ui, sans-serif; background: #1a1610; color: #f4ecd8; padding: 24px; } .accordion { max-width: 460px; border: 1px solid #2a2218; border-radius: 6px; overflow: hidden; } details { border-bottom: 1px solid #2a2218; background: #0f0d09; } details:last-child { border-bottom: 0; } summary { cursor: pointer; padding: 12px 16px; font-weight: 600; color: #e9b454; list-style: none; } summary::-webkit-details-marker { display: none; } summary::before { content: "+ "; color: #8a7f6a; font-weight: 700; } details[open] summary::before { content: "− "; } details[open] summary { color: #f4ecd8; background: #161109; } details p { margin: 0; padding: 0 16px 14px; color: #cbbfa6; line-height: 1.5; } ``` ```explain "Getting started" is expanded on load because it has the `open` attribute, and its summary swaps the `+` marker for `−` via the `details[open]` selector; opening another panel closes it, since the shared `name="docs"` keeps the group exclusive. The default triangle is suppressed with `list-style: none` plus `::-webkit-details-marker`, leaving the custom `::before` glyph. ``` :: ::example{slug="custom-marker-disclosure" title="Custom rotating marker" difficulty=advanced language=combined} ```html

Order #4815 — shipped

Replacing the default triangle: hide the built-in marker, then animate a span that rotates 90° when the element is open.

Order #1623 — processing

The open attribute on the first card means it renders expanded; this one stays collapsed until toggled.

``` ```css body { font-family: system-ui, sans-serif; background: #1a1610; color: #f4ecd8; padding: 24px; } .card { border: 1px solid #2a2218; border-radius: 6px; margin-bottom: 10px; background: #0f0d09; overflow: hidden; } summary { cursor: pointer; padding: 12px 16px; font-weight: 600; color: #e9b454; display: flex; align-items: center; gap: 10px; list-style: none; } summary::-webkit-details-marker { display: none; } .chevron { display: inline-block; font-size: 0.7em; color: #8a7f6a; transition: transform 0.2s ease; } .card[open] .chevron { transform: rotate(90deg); color: #e9b454; } .card p { margin: 0; padding: 0 16px 14px 38px; color: #cbbfa6; line-height: 1.5; } ``` ```explain The first card starts expanded (`open`) with its `▶` chevron rotated to point down, while the second stays collapsed pointing right; toggling either animates the chevron 90° via the `transition` on `.card[open] .chevron`. These cards omit `name`, so both can be open at once — independent disclosures rather than an exclusive accordion. ``` ::