Collapse is used to elegantly hide and show extended content programmatically.

Import

import { Collapse } from '@contentful/f36-components';

Examples

The collapse component is a basic component to show and hide content programmatically.

Basic usage

Props (API reference)

Name

Type

Default

children
ReactNode

Child nodes to be rendered in the component

className
string

string for additional classNames

isExpanded
false
true

A boolean that tells if the accordion should be expanded or collapsed

false
testId
string

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

cf-collapse

Content guidelines

  • This component offers a controllable way to hide or show content programmatically
  • Anything can be passed as the content of the collapse

Accessibility

  • Trigger for expanding and closing should be an accessible button. If content is hidden, it gets set to "aria-hidden"="true".