RhombusKit

Accordion

An accordion stacks collapsible sections so a long page reveals one chunk at a time. RhombusKit's <rhombus-accordion> + <rhombus-accordion-panel> are hand-rolled on native buttons and regions — no mat-expansion-panel underneath — so they theme straight off the token contract and carry the full WAI-ARIA accordion keyboard model.

Example

Orders ship within two business days via tracked courier.

Unused items can be returned within 30 days for a full refund.

Every product carries a two-year limited warranty.

When to use

  • To break a long form or document into scannable, collapsible sections (FAQs, settings groups, an "SEO" block) where the user only needs one open at a time.
  • When vertical space matters and sections are independently optional — let users expand just what they care about.

When not to use

  • For switching between peer views of equal importance, use Tabs — they keep one view visible without the vertical reflow.
  • For collapsible navigation sections in a sidebar, use a collapsible Nav List.
  • For a single show/hide of one block, a plain toggle button is simpler than a one-panel accordion.

Related components

  • Tabs — switch between peer views.
  • Nav List — collapsible sidebar sections.

Was this page helpful?