@contentful/f36-collapse

---

title: 'Collapse' slug: /components/collapse/ section: 'animationComponents' github: 'https://github.com/contentful/forma-36/tree/main/packages/components/collapse' typescript: ./src/Collapse.tsx, storybook: 'https://f36-storybook.contentful.com/?path=/story/animation-collapse--basic'

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

Props (API reference)

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