Collapse

Collapse components are used to collapse and expand content inline on a page. This lets users progressively disclose information as desired.

Basic

examples

<Button onClick={toggleHandler}>
  Collapse Trigger ({isOpen ? "Open" : "Closed"})
</Button>
<Collapse isOpen={isOpen}>Collapse content</Collapse>

<Button data-spirit-toggle="collapse" data-spirit-target="CollapseExample">Collapse trigger</Button>
<Collapse id="CollapseExample">Collapse content</Collapse>

Responsive

examples

<Button UNSAFE_className="d-tablet-none" onClick={toggleHandler}>
  Collapse on mobile Trigger ({isOpen ? "Open" : "Closed"})
</Button>
<Collapse isOpen={isOpen} collapsibleToBreakpoint="tablet">
  Collapse content
</Collapse>

<Button UNSAFE_className="d-tablet-none" data-spirit-toggle="collapse" data-spirit-target="CollapseExample" aria-expanded="false">Collapse on mobile Trigger</Button>
<Collapse id="CollapseExample" breakpoint="tablet">
    Collapse content
</Collapse>

Uncontrolled only React

examples

<UncontrolledCollapse
  id="CollapseExample"
  renderTrigger={({ isOpen, ...restProps }) => (
    <Button {...restProps}>
      Collapse Trigger ({isOpen ? "Open" : "Closed"})
    </Button>
  )}
  hideOnCollapse
>
  Collapse content
</UncontrolledCollapse>

API

On this page