Skip to main content
Version: Current

Web Components - Accordion

An accordion is a vertically stacked set of interactive headings representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.

Set-up​

import { provideDesignSystem, alphaAccordion, alphaAccordionItem } from '@genesislcap/alpha-design-system';

provideDesignSystem().register(alphaAccordion(), alphaAccordionItem());

Usage​

Live Editor
<alpha-accordion>
  <alpha-accordion-item expanded>
    <span slot="heading">Panel one</span>
    Panel one content
  </alpha-accordion-item>
  <alpha-accordion-item>
    <span slot="heading">Panel two</span>
    Panel two content
  </alpha-accordion-item>
  <alpha-accordion-item>
    <span slot="heading">Panel three</span>
    Panel three content
  </alpha-accordion-item>
</alpha-accordion>
Result
Loading...

Use cases​

  • Presenting multiple sections of content

Additional resources​