Skip to main content
react-md

Collapse

The collapse transition can be used to animate an element in and out of view vertically line an accordian by using the Collapse component or useCollapseTransition hook. This is used behind the scenes in the Expansion Panel and Tree components, but can be used to implement the disclosure pattern.

Simple Collapse Example

The Collapse component can be used to inject styles in a child component that will animate the height when the collapsed prop is changed.

The child of a Collapse must be a component that accepts a ref, style, and className to work correctly. All components within react-md and native elements support this out of the box, but custom components might require React.forwardRef and passing the style and className props forward.

"use client";

import { Button } from "@react-md/core/button/Button";
import { Card } from "@react-md/core/card/Card";
import { CardContent } from "@react-md/core/card/CardContent";
import { Collapse } from "@react-md/core/transition/Collapse";
import { Typography } from "@react-md/core/typography/Typography";
import { useToggle } from "@react-md/core/useToggle";
import { type ReactElement } from "react";

export default function SimpleCollapseExample(): ReactElement {
  const { toggled, toggle } = useToggle(true);

  return (
    <>
      <Button onClick={toggle}>Toggle</Button>
      <Collapse collapsed={toggled}>
        <Card fullWidth>
          <CardContent>
            <Typography>Here is some content to display!</Typography>
          </CardContent>
        </Card>
      </Collapse>
    </>
  );
}

Press Enter to start editing.

Simple useCollapseTransition Example

This is the same example as above, but using the hook version instead.

Here is some content to display!

"use client";

import { Button } from "@react-md/core/button/Button";
import { Card } from "@react-md/core/card/Card";
import { CardContent } from "@react-md/core/card/CardContent";
import { useCollapseTransition } from "@react-md/core/transition/useCollapseTransition";
import { Typography } from "@react-md/core/typography/Typography";
import { useToggle } from "@react-md/core/useToggle";
import { type ReactElement } from "react";

export default function SimpleUseCollapseTransitionExample(): ReactElement {
  const { toggled, toggle } = useToggle();
  const { elementProps } = useCollapseTransition({
    transitionIn: toggled,
  });

  return (
    <>
      <Button onClick={toggle}>Toggle</Button>
      <Card fullWidth {...elementProps}>
        <CardContent>
          <Typography>Here is some content to display!</Typography>
        </CardContent>
      </Card>
    </>
  );
}

Press Enter to start editing.

Partial Collapse

The Collapse or useCollapseTransition can also be used to show partial content instead of entirely hiding everything by configuring the minHeight prop and optionally the minPaddingTop/minPaddingBottom.

Sed venenatis placerat pulvinar. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sagittis urna diam, quis venenatis nibh congue sit amet. Suspendisse condimentum urna ac congue fringilla. Vivamus congue libero massa, tempor commodo purus pellentesque sed. Nam magna sapien, tincidunt in nunc a, convallis fringilla enim. Aenean at sagittis neque. Integer ornare mi consequat libero molestie luctus. Curabitur venenatis felis ut ipsum feugiat accumsan.

Vivamus rhoncus efficitur ligula. Donec placerat tortor at vehicula bibendum. Duis sit amet cursus mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed sit amet sagittis orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean egestas erat ut quam consequat facilisis. Duis rhoncus libero at nisl suscipit, et tincidunt velit vestibulum. Mauris et pharetra tortor. Praesent ac mattis risus.

"use client";

import { Button } from "@react-md/core/button/Button";
import { Card } from "@react-md/core/card/Card";
import { CardContent } from "@react-md/core/card/CardContent";
import { CardFooter } from "@react-md/core/card/CardFooter";
import { useCollapseTransition } from "@react-md/core/transition/useCollapseTransition";
import { Typography } from "@react-md/core/typography/Typography";
import { useToggle } from "@react-md/core/useToggle";
import { cnb } from "cnbuilder";
import { type ReactElement } from "react";

import styles from "./PartialCollapseExample.module.scss";

export default function PartialCollapseExample(): ReactElement {
  const { toggled, toggle } = useToggle();
  const { elementProps } = useCollapseTransition({
    transitionIn: toggled,
    // About 3 lines of content in the `CardContent` including vertical padding
    minHeight: "7rem",

    // the default `CardContent` vertical padding
    minPaddingTop: "1rem",
    minPaddingBottom: "1rem",
  });

  return (
    <Card>
      <CardContent {...elementProps}>
        <Typography className={cnb(!toggled && styles.overflow)}>
          Sed venenatis placerat pulvinar. Pellentesque habitant morbi tristique
          senectus et netus et malesuada fames ac turpis egestas. Sed sagittis
          urna diam, quis venenatis nibh congue sit amet. Suspendisse
          condimentum urna ac congue fringilla. Vivamus congue libero massa,
          tempor commodo purus pellentesque sed. Nam magna sapien, tincidunt in
          nunc a, convallis fringilla enim. Aenean at sagittis neque. Integer
          ornare mi consequat libero molestie luctus. Curabitur venenatis felis
          ut ipsum feugiat accumsan.
        </Typography>
        <Typography>
          Vivamus rhoncus efficitur ligula. Donec placerat tortor at vehicula
          bibendum. Duis sit amet cursus mauris. Class aptent taciti sociosqu ad
          litora torquent per conubia nostra, per inceptos himenaeos. Sed sit
          amet sagittis orci. Pellentesque habitant morbi tristique senectus et
          netus et malesuada fames ac turpis egestas. Aenean egestas erat ut
          quam consequat facilisis. Duis rhoncus libero at nisl suscipit, et
          tincidunt velit vestibulum. Mauris et pharetra tortor. Praesent ac
          mattis risus.
        </Typography>
      </CardContent>
      <CardFooter>
        {!toggled && <Button onClick={toggle}>Read more</Button>}
      </CardFooter>
    </Card>
  );
}

Press Enter to start editing.

@use "everything";

.overflow {
  @include everything.line-clamp(3);

  max-height: 6rem;
  text-overflow: ellipsis;
}

Press Enter to start editing.

Disable Transition

Like other transitions in react-md, the transition can be disabled by setting the timeout to 0 or disable all transitions by setting the TRANSITION_CONFIG.disabled to true.

"use client";

import { Button } from "@react-md/core/button/Button";
import { Card } from "@react-md/core/card/Card";
import { CardContent } from "@react-md/core/card/CardContent";
import { Collapse } from "@react-md/core/transition/Collapse";
import { Typography } from "@react-md/core/typography/Typography";
import { useToggle } from "@react-md/core/useToggle";
import { type ReactElement } from "react";

export default function DisableTransitionExample(): ReactElement {
  const { toggled, toggle } = useToggle(true);

  return (
    <>
      <Button onClick={toggle}>Toggle</Button>
      <Collapse collapsed={toggled} timeout={0}>
        <Card fullWidth>
          <CardContent>
            <Typography>Here is some content to display!</Typography>
          </CardContent>
        </Card>
      </Collapse>
    </>
  );
}

Press Enter to start editing.