Collapse

Animate presence with slide down transition
Import

Usage

import { useState } from 'react';
import { Button, Collapse } from '@mantine/core';
function Demo() {
const [opened, setOpened] = useState(false);
return (
<>
<Button onClick={() => setOpened((o) => !o)}>
Toggle content
</Button>
<Collapse in={opened}>
{/* content... */}
</Collapse>
</>
);
}

Change transition

Set following props to control transition:

  • transitionDuration – duration in ms
  • transitionTimingFunction – timing function (ease, linear, etc.), defaults to ease
  • onTransitionEnd – called when transition ends (both open and close)
import { useState } from 'react';
import { Button, Collapse } from '@mantine/core';
function Demo() {
const [opened, setOpened] = useState(false);
return (
<>
<Button onClick={() => setOpened((o) => !o)}>
Toggle with linear transition
</Button>
<Collapse in={opened} transitionDuration={1000} transitionTimingFunction="linear">
{/* content... */}
</Collapse>
</>
);
}

Horizontal Collapse

Set axis to x for horizontal collapse:

From Bulbapedia: Bulbasaur is a small, quadrupedal Pokémon that has blue-green skin with darker patches. It has red eyes with white pupils, pointed, ear-like structures on top of its head, and a short, blunt snout with a wide mouth. A pair of small, pointed teeth are visible in the upper jaw when its mouth is open. Each of its thick legs ends with three sharp claws. On Bulbasaur's back is a green plant bulb, which is grown from a seed planted there at birth. The bulb also conceals two slender, tentacle-like vines and provides it with energy through photosynthesis as well as from the nutrient-rich seeds contained within.
import { useState } from 'react';
import { Button, Collapse } from '@mantine/core';
function Demo() {
const [opened, setOpened] = useState(true);
return (
<>
<Button onClick={() => setOpened((o) => !o)}>
Toggle content
</Button>
<Collapse in={opened} axis="x">
{/* content... */}
</Collapse>
</>
);
}

Nested Collapse components

Download more icon variants from https://tabler-icons.io/i/search

Collapse component props

NameTypeDescription
animateOpacity
boolean
Should opacity be animated
axis
"x" | "y"
Axis of collapse
children *
ReactNode
Content that should be collapsed
in *
boolean
Opened state
onTransitionEnd
() => void
Called each time transition ends
transitionDuration
number
Transition duration in ms
transitionTimingFunction
string
Transition timing function