Collapse

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

function CollapseExample() {
  const [isExpanded, setIsExpanded] = React.useState(true);
  return (
    <div>
      <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>
    </div>
  );
}
function CollapseExample() {
  const [isExpanded, setIsExpanded] = React.useState(true);
  return (
    <div>
      <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>
    </div>
  );
}
Hide source

Props (API reference)

• Name

  children

  Description

  Child nodes to be rendered in the component

  ReactNode
• Name

  className

  Description

  string for additional classNames

  string
• Name

  isExpanded

  Description

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

  false

  true

  Default

  false
• Name

  testId

  Description

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

  string

  Default

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