Accordion

Examples

Basic Accordion

Elsevier is singularly focused on helping healthcare professionals improve clinical outcomes through evidence-based care.

Code

<Accordion>
  <AccordionItem id="basic-accordion-1">
    <AccordionTitle>
      How many of Elsevier's journals offer a Gold Open Access option?
    </AccordionTitle>
    <AccordionContent>
      Elsevier is singularly focused on helping healthcare professionals improve clinical outcomes through evidence-based care.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem
    id="basic-accordion-2"
    open
  >
    <AccordionTitle>
      How many of Elsevier's journals offer a Gold Open Access option?
    </AccordionTitle>
    <AccordionContent>
      Elsevier is singularly focused on helping healthcare professionals improve clinical outcomes through evidence-based care.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Props

Accordion

`className`

string

`atoms`

Applies permitted design system styles. See styling documentation for more.

AccordionItem

`open`

boolean

Default: false

`id`

string

`atoms`

Applies permitted design system styles. See styling documentation for more.

AccordionContent

`className`

string

`contentProps`

ContentProps

`as`

ElementType<any>

`atoms`

Applies permitted design system styles. See styling documentation for more.

AccordionTitle

`className`

string

`isOpen`

boolean

`triggerProps`

TriggerProps

`as`

ElementType<any>

`atoms`

Applies permitted design system styles. See styling documentation for more.