Accordion

Sections that expand and collapse, built on native details and summary.

CSS only components/accordion.css

FAQ

Can I change an invoice after sending it?

Yes. Edits create a new version; the client always sees the latest one.

Which currencies are supported?

CZK, EUR and USD.

<div class="dsgn-accordion" style="max-inline-size: 40rem">
  <details name="dx-faq" open><summary>Can I change an invoice after sending it?<span class="dsgn-icon" aria-hidden="true">expand_more</span></summary><div class="dsgn-accordion-content"><p>Yes. Edits create a new version; the client always sees the latest one.</p></div></details>
  <details name="dx-faq"><summary>Which currencies are supported?<span class="dsgn-icon" aria-hidden="true">expand_more</span></summary><div class="dsgn-accordion-content"><p>CZK, EUR and USD.</p></div></details>
</div>

Usage

The same name on several <details> makes them exclusive (one open at a time) natively. Rows use row-pad-y, like table rows. Summary = body-s medium, content = body-s muted. Chevron turns when open, the content slides open; the in-page find (Ctrl+F) opens a closed item automatically.

Details

Classes: .dsgn-accordion .dsgn-icon .dsgn-accordion-content
Tokens used: --dsgn-border --dsgn-control-gap --dsgn-duration --dsgn-duration-fast --dsgn-ease --dsgn-focus --dsgn-focus-offset --dsgn-focus-width --dsgn-font-sans --dsgn-font-size-body-s --dsgn-font-weight-medium --dsgn-line-height-body-s --dsgn-line-separator --dsgn-radius-s --dsgn-row-pad-y --dsgn-space-8 --dsgn-text --dsgn-text-muted
In Figma: Accordion item
Import alone: dsgn.systems/components/accordion.css