Collapse

Animate presence with slide down transition
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

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>
    </>
  );
}

Nested Collapse components

Go back
Box – @mantine/core
Up next
Divider – @mantine/core

Collapse component props

NameTypeDescription
animateOpacity
boolean
Should opacity be animated
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
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter