---
title: 'Collapse'
type: 'component'
status: 'stable'
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](/components/accordion).

## Import

```jsx static=true
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

```jsx file=./examples/CollapseExample.tsx

```

## Props (API reference)

<PropsTable of="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".