Accordion

A set of vertically stacked headings that each reveal an associated section of content.

Is it accessible?

Is it unstyled?

Can it be animated?

				
<Accordion.Container class="accordion__container" slot="component">
  <Accordion.Item class="accordion__item" value="item-1">
    <Accordion.Trigger class="accordion__trigger">
      Is it accessible?
    </Accordion.Trigger>
    <Accordion.Content class="accordion__content">
      <div class="accordion__content__text" transition:slide>
        Yes! You can animate the Accordion with CSS or JavaScript.
      </div>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item class="accordion__item" value="item-2">
    <Accordion.Trigger class="accordion__trigger">
      Is it unstyled?
    </Accordion.Trigger>
    <Accordion.Content class="accordion__content">
      <div class="accordion__content__text" transition:slide>
        Yes! You can animate the Accordion with CSS or JavaScript.
      </div>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item class="accordion__item" value="item-3">
    <Accordion.Trigger class="accordion__trigger">
      Can it be animated?
    </Accordion.Trigger>
    <Accordion.Content class="accordion__content">
      <div class="accordion__content__text" transition:slide>
        Yes! You can animate the Accordion with CSS or JavaScript.
      </div>
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Container>

API Reference

Container

Prop	Type	Default
`value`	`any \| Array<any>`	`[]`
`type`	`AccordionType`	`single`
`disabled`	`boolean`	`false`

Content

No props

Item

Prop	Type	Default
`value`	`any`	`-`
`disabled`	`boolean`	`false`

Trigger

No props