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>

Accordion with links in content

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

Click here for more content in an a tag

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.
      <UnknownElementType>
        Click here for more content in a link
      </UnknownElementType>
    </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.
      <a href="/">
        Click here for more content in an a tag
      </a>
    </AccordionContent>
  </AccordionItem>
</Accordion>

Props

Accordion

`className`

string

`atoms`

Applies permitted design system styles. See for more.

AccordionItem

`open`

boolean

Default: false

`id`

string

`atoms`

Applies permitted design system styles. See for more.

AccordionContent

`className`

string

`contentProps`

ContentProps

`as`

ElementType

`atoms`

Applies permitted design system styles. See for more.

AccordionTitle

`className`

string

`isOpen`

boolean

`triggerProps`

TriggerProps

`as`

ElementType

`atoms`

Applies permitted design system styles. See for more.