Collapse

Animate hiding and showing content.

Used in Accordion.

Import

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

Examples

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

Basic usage

function CollapseExample() {
const [isExpanded, setIsExpanded] = React.useState(true);
return (
<Stack flexDirection="column">
<Button onClick={() => setIsExpanded(!isExpanded)}>Toggle</Button>
<Collapse isExpanded={isExpanded}>
<Text>
Customers on the Team tier can pay with a credit card (American
Express, MasterCard or Visa). Enterprise customers have the choice of
paying with a credit card or wire transfer.
</Text>
</Collapse>
</Stack>
);
}

Props (API reference)

Open in Storybook

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".