Skip to content
Sancho UI
Toggle dark mode
Getting started
Built with ☕ by
Ben McMahen

Collapse

Collapse is used to hide and reveal content and works seamlessly with content of dynamic height.

You can build collapsing content using two exports:

  • Collapse: The main component which measures and reveals content.
  • useCollapse: A hook which helps control Collapse and provides the necessary aria-attributes.

Basic usage

If you control collapse using your own state, you are responsible for providing the necessary aria attributes.

Collapsed content
/** @jsx jsx */

function CollapseExample() {
  const [show, setShow] = React.useState(false);
  const theme = useTheme();

  return (
    <React.Fragment>
      <Button
        onPress={() => setShow(!show)}
        aria-expanded={show}
        aria-controls="collapse"
      >
        {show ? "Hide" : "Expand"}
      </Button>
      <Collapse id="collapse" show={show}>
        <Text
          css={{
            display: "inline-block",
            padding: theme.spaces.lg,
            background: theme.colors.background.tint1
          }}
        >
          Collapsed content
        </Text>
      </Collapse>
    </React.Fragment>
  );
}

Here's a more advanced example:

A funny dog

Roger

I'm your best friend.
I love food.
And I love walks.

Learn more
function AdvancedCollapse() {
  const [show, setShow] = React.useState(false);

  return (
    <Layer className="Collapse__example">
      <Embed width={707} height={448}>
        <img
          src={
            "https://images.unsplash.com/photo-1508280756091-9bdd7ef1f463?ixlib=rb-1.2.1&auto=format&fit=crop&w=1990&q=80"
          }
          alt="A funny dog"
        />
      </Embed>
      <div className="Collapse__content">
        <Text variant="h4">Roger</Text>
        <Collapse id="collapse" show={show}>
          <Text className="Collapse__text" variant="paragraph">
            I'm your best friend. <br />
            I love food. <br />
            And I love walks.
          </Text>
        </Collapse>
        <Button
          aria-controls="collapse"
          variant="ghost"
          intent="primary"
          iconAfter={show ? <IconChevronUp /> : <IconChevronDown />}
          onPress={() => setShow(!show)}
        >
          {show ? "Learn less" : "Learn more"}
        </Button>
      </div>
    </Layer>
  );
}

Using hooks

The recommended way to control Collapse is by using the useCollapse hook, and binding the return value to the appropriate elements. This provides the recommended aria attributes.

Collapse content
function HookCollapseExample() {
  const state = useCollapse(false);
  return (
    <div>
      <Button {...state.buttonProps}>
        Click to {state.show ? "hide" : "reveal"}!
      </Button>
      <Collapse {...state.collapseProps}>Collapse content</Collapse>
    </div>
  );
}

API

useCollapse
valueOf*() => boolean =
Returns the primitive value of the specified object.
Collapse
id*string
A unique id required for accessibility purposes.
show*boolean
Controls whether the children should be visible
children*ReactNode
Any element that you want to reveal
cssInterpolationWithTheme<any>