Accordion

Collapsible content panels that display a list of headers, allowing users to expand and collapse associated content.

When to Use

To organize and present content in a compact, expandable format upon clicking on the header.
To group related information that doesn't need to be visible all at once.
To reduce page length and improve navigation in content-heavy pages.

Usage

  import { Accordion, AccordionItem } from '@youcan/alto';

vue

  <Accordion>
      <AccordionItem title="Accordion row" >
        Placeholder content for accordion.
      </AccordionItem>
  </Accordion>