Collapsible

Collapsible is used to show a preview of long content and let users expand it when needed.

Base example

Collapsible renders a built-in trigger button below the content. Use collapsedHeight to set how many pixels of content are visible when collapsed.

import { Collapsible, Flex, Text, ThemeSpace } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Collapsible collapsedHeight={80} defaultExpanded={false}>
      <Flex direction="column" gap={ThemeSpace.Medium}>
        <Text>
          Casper UI Collapsible lets you show long content in a compact layout and expand it when needed. It
          is useful for descriptions, terms, and informational blocks where full text is optional at first
          glance.
        </Text>
        <Text>
          The collapsedHeight prop controls how many pixels of content remain visible in the collapsed state.
        </Text>
        <Text>
          When the content is shorter than collapsedHeight, the trigger button is hidden automatically and the
          content stays fully visible.
        </Text>
      </Flex>
    </Collapsible>
  );
}

⛶

If the content is shorter than collapsedHeight, the component stays fully expanded and the trigger button is hidden.

Note

collapsedHeight accepts a pixel value. If the content height changes dynamically (e.g. items are removed), the component will automatically expand if the content drops below collapsedHeight.

Accessibility

The trigger is exposed as a button control and updates aria-expanded based on visibility.