Accordion

Usage

Yes. It adheres to the WAI-ARIA design pattern.

::accordion{default-value="first-item" collapsible}
  ::accordion-item{value="first-item"}
  #title
  Is it accessible?

  #content
  Yes. It adheres to the WAI-ARIA design pattern.
  ::

  ::accordion-item
  #title
  Is it unstyled?

  #content
  Yes. It's unstyled by default, giving you freedom over the look and feel.
  ::
  :accordion-item{title="Can it be animated?" content="Yes! You can use the transition prop to configure the animation."}
::

The value prop in ::accordion-item is auto-generated by default. You can set them to other unique values and put them in the default-value prop of ::accordion.

Props

::accordion-item

type'single' | 'multiple'
'single'
collapsibleboolean
undefined
Whether the items can be collapsed
defaultValuestring | string[]
Default open item

::accordion

valuestring
Item value
titlestring
Item title
contentstring
Item content