monday-ui-react-core/src/components/ExpandCollapse/__stories__/ExpandCollapse.mdx

Official monday.com UI resources for application development in React.js

import { Canvas, Meta } from "@storybook/blocks";
import { ACCORDION, DROPDOWN, TABLE } from "../../../storybook/components/related-components/component-description-map";
import { TipCombineMultiple } from "./ExpandCollapse.stories.helpers";
import * as ExpandCollapseStories from "./ExpandCollapse.stories";

<Meta of={ExpandCollapseStories} />

# ExpandCollapse

- [Overview](#overview)
- [Props](#props)
- [Variants](#variants)
- [Related components](#related-components)
- [Feedback](#feedback)

## Overview

ExpandCollapse is a component that allows you to hide and show content.

<Canvas of={ExpandCollapseStories.Overview} />

<TipCombineMultiple />

## Props

<PropsTable />

## Variants

### Open by default

<Canvas of={ExpandCollapseStories.OpenByDefault} />

### Controlled open state

You can control the open state of the ExpandCollapse component by passing the <code>open</code> prop.

<Canvas of={ExpandCollapseStories.ControlledOpenState} />

### Custom header renderer

<Canvas of={ExpandCollapseStories.CustomHeaderRenderer} />

### Without borders

<Canvas of={ExpandCollapseStories.WithoutBorders} />

## Related components

<RelatedComponents componentsNames={[ACCORDION, DROPDOWN, TABLE]} />