HTML <details> Accordion Builder

Build zero-JS disclosures and exclusive accordions using the new name= attribute. Pick a chevron style, smoothly animate the open/close with interpolate-size, and copy production-ready HTML + CSS for FAQs and feature pages.

Items

Style preset

Chevron

Chevron side

Accent color

Surface bg

Behavior

Exclusive accordion (name= attribute — one open at a time) Animate open/close (interpolate-size: allow-keywords) First item starts open (open attr) Wrap with FAQPage JSON-LD schema

Group name (name=)

About `<details>` & the `name=` attribute

<details> + <summary> is the only built-in disclosure widget — zero JS, keyboard accessible, screen-reader friendly.
name="faq" Chrome 120+, Safari 17.2+, Firefox 130+ turns a group into an exclusive accordion: opening one closes the others. No JS required.
Animate height with interpolate-size: allow-keywords Chrome 129+ — transitions to height: auto now Just Work.
Style the marker with summary::marker or ::-webkit-details-marker { display:none } (Safari needs both).
For semantic FAQ pages, wrap items with FAQPage JSON-LD schema so search engines render rich results.

HTML <details> Accordion Builder

About <details> & the name= attribute

HTML `<details>` Accordion Builder

About `<details>` & the `name=` attribute