Collapse

Opens and closes its content by its height - or, horizontal, its width.

Opens and closes its content by its height - or, horizontal, its width. The size it moves to is measured from the content as it starts, and left to the content once it is open, so content that grows keeps showing. Closed, it keeps collapsedSize, and is hidden when that is nothing. A user who asked for less motion (prefers-reduced-motion: reduce) sees it change at once, and the callbacks still fire.

import { Collapse } from '@soroush.tech/design-system/Collapse'

;<Collapse isShown={isOpen}>
  <p>Content that opens and closes.</p>
</Collapse>

Examples

Default

Content that opens and closes. Its height is measured as it moves, and left to it once it is open, so content that grows keeps showing.

const args: Partial<CollapseProps> = { isShown: true, children: 'Content that opens and closes' }

<Collapse {...args}>{content}</Collapse>

Toggled

Content that opens and closes. Its height is measured as it moves, and left to it once it is open, so content that grows keeps showing.

const args: Partial<CollapseProps> = { children: 'Content that opens and closes', isShown: true }

<TransitionToggle>
  {(isShown) => (
    <Collapse {...args} isShown={isShown}>
      {content}
    </Collapse>
  )}
</TransitionToggle>

Collapsed Size

Content that opens and closes. Its height is measured as it moves, and left to it once it is open, so content that grows keeps showing.

const args: Partial<CollapseProps> = { children: 'Content that opens and closes', isShown: true }

<TransitionToggle>
  {(isShown) => (
    <Collapse {...args} isShown={isShown} collapsedSize={40}>
      {content}
    </Collapse>
  )}
</TransitionToggle>

Horizontal

Content that opens and closes. Its height is measured as it moves, and left to it once it is open, so content that grows keeps showing.

const args: Partial<CollapseProps> = { children: 'Content that opens and closes', isShown: true }

<TransitionToggle>
  {(isShown) => (
    <Collapse {...args} isShown={isShown} orientation="horizontal">
      {content}
    </Collapse>
  )}
</TransitionToggle>

Unmounted

const args: Partial<CollapseProps> = { children: 'Content that opens and closes', isShown: true }

<TransitionToggle>
  {(isShown) => (
    <Collapse {...args} isShown={isShown} shouldMountOnEnter shouldUnmountOnExit>
      {content}
    </Collapse>
  )}
</TransitionToggle>