Accordion

Store longer content in sections users can open one at a time.

Keep the section titles short.

Import

import { Accordion } from '@contentful/f36-components';
// or
import { Accordion } from '@contentful/f36-accordion';

Examples

The accordion has two variations that define the alignment of the chevron icon: left or right.

Basic usage

Using it with other components

Other typographic components can be passed as the accordion's title and anything can be used as the accordion's content. For example:

Controlled Accordion

By default, the AccordionItem is uncontrolled (manage it's expanded state by itself) But you can make it controlled by providing boolean value to isExpanded for Accordion.Item component

Props (API reference)

Accordion

Name

Type

Default

align
"start"
"end"

Specify the alignment of the chevron inside the accordion header

end
children
ReactNode

Child nodes to be rendered in the component

className
string

CSS class to be appended to the root element

testId
string

A [data-test-id] attribute used for testing purposes

cf-ui-accordion

Accordion.Item

Name

Type

Default

align
"start"
"end"

Specify the alignment of the chevron inside the accordion header

end
children
ReactNode

The children of the AccordionItem are in fact the content of the accordion

className
string

CSS class to be appended to the root element

isExpanded
false
true

By default, the AccordionItem is uncontrolled (manage it's expanded state by itself) But you can make it controlled by providing boolean

onCollapse
() => void

A function to be called when the accordion item is closed

onExpand
() => void

A function to be called when the accordion item is opened

testId
string

A [data-test-id] attribute used for testing purposes

cf-ui-accordion-item
title
string
number
false
true
{}
ReactElement<any, string | JSXElementConstructor<any>>
ReactNodeArray
ReactPortal

The accordion title

Accordion Title
titleElement
"h1"
"h2"
"h3"
"h4"
"h5"
"h6"

The heading element that will be used by the AccordionHeader

h2

Content guidelines

  • The title should be a short message that summarize the content of the accordion.
  • Anything can be passed as the content of the accordion, but often organizing it with Texts and Tables would be enough.
  • When using headings, be mindful about the heading levels. The header is a Subheading with h2 tag.

Accessibility

  • It allows keyboard navigation to open and close the accordions