Skip to content
aidsgnaidsgnaidsgn

Accordion

aidsgn-accordion groups aidsgn-accordion-item sections. Author each native details and summary descendant yourself; set open on both the host and details to expand an item initially.

What is aidsgn?
A native Web Component design system with DTCG tokens.
<aidsgn-accordion>
<aidsgn-accordion-item summary="What is aidsgn?" open>
  <details class="aidsgn-accordion-item__details" open>
    <summary class="aidsgn-accordion-item__summary"><span class="aidsgn-accordion-item__summary-label">What is aidsgn?</span><svg class="aidsgn-accordion-item__chevron" viewBox="0 0 16 16" aria-hidden="true"><path d="m3 6 5 5 5-5" fill="none" stroke="currentColor" /></svg></summary>
    <div class="aidsgn-accordion-item__panel"><div>A native Web Component design system with DTCG tokens.</div></div>
  </details>
</aidsgn-accordion-item>
</aidsgn-accordion>

Multiple sections may be open. Each item uses native details and summary semantics; a decorative chevron rotates with the state while collapsed panels animate using a grid transition. Both animations are removed for reduced-motion preferences, and native open and closed state changes immediately. Use it for related optional detail, not for essential content users must discover to complete a task.

Usage guidelines

Section titled “Usage guidelines”
An accordion uses the summaries Shipping and returns and Payment methods to preview each section.An accordion uses the summaries Shipping and returns and Payment methods to preview each section.
Do

Write descriptive summaries

Use concise summaries that tell people what each item will reveal before they expand it.

A delivery date and primary Continue button remain visible above an accordion for optional details.A delivery date and primary Continue button remain visible above an accordion for optional details.
Do

Keep essential information visible

Present information elsewhere when people must see it without first interacting with a disclosure.

A collapsed accordion labelled More information is annotated to show that a payment error is hidden inside.A collapsed accordion labelled More information is annotated to show that a payment error is hidden inside.
Don’t

Avoid hiding urgent content

Keep primary actions and critical errors outside collapsed items where people could overlook them.

An accordion incorrectly contains destination labels Home, Orders, and Account rather than related disclosure sections.An accordion incorrectly contains destination labels Home, Orders, and Account rather than related disclosure sections.
Don’t

Avoid unrelated navigation

Use links or Tabs when the destinations do not form sections of one related disclosure.