Accordion

@oddapp/ui · Tier 1

Vertically stacked panels that expand and collapse to reveal content.

Default

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@oddapp/ui'

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Section one</AccordionTrigger>
    <AccordionContent>Content for section one.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Section two</AccordionTrigger>
    <AccordionContent>Content for section two.</AccordionContent>
  </AccordionItem>
</Accordion>

Multiple

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@oddapp/ui'

<Accordion type="multiple">
  <AccordionItem value="a">
    <AccordionTrigger>Alpha</AccordionTrigger>
    <AccordionContent>Alpha content.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="b">
    <AccordionTrigger>Beta</AccordionTrigger>
    <AccordionContent>Beta content.</AccordionContent>
  </AccordionItem>
</Accordion>