accordion

Collapsible content panels built on native <details>.

status: stable js: none support: details

Preview

<div class="accordion"><details name="X"><summary>Q</summary><div class="accordion-content">A</div></details></div>

Import the component CSS (depends on base/tokens.css):

@import "@russfranky/shadcss/src/components/accordion.css";

…or copy it into your repo with the CLI:

npx @russfranky/shadcss-cli add accordion

Native <details>/<summary> — keyboard + SR for free; exclusive mode via name=

.accordion .accordion-content

base/tokens base/theme