Collapsible
An interactive component that can be expanded or collapsed.
Animation
You can use CSS animations to create smooth transitions for opening and closing the Collapsible
content. Utilize the data-state
attribute in combination with the --height
CSS variable to
animate the open and closed states.
@keyframes slideDown {
from { height: 0; }
to { height: var(--height); }
}
@keyframes slideUp {
from { height: var(--height); }
to { height: 0; }
}
[data-scope='collapsible'][data-part='content'][data-state='open'] {
animation: slideDown 250ms;
}
[data-scope='collapsible'][data-part='content'][data-state='closed'] {
animation: slideUp 200ms;
}
Examples
Learn how to use the Collapsible
component in your project. Let's examine the most basic example:
import { Collapsible } from '@ark-ui/react/collapsible'
export const Basic = () => (
<Collapsible.Root>
<Collapsible.Trigger>Toggle</Collapsible.Trigger>
<Collapsible.Content>Content</Collapsible.Content>
</Collapsible.Root>
)
import { Collapsible } from '@ark-ui/solid/collapsible'
export const Basic = () => (
<Collapsible.Root>
<Collapsible.Trigger>Toggle</Collapsible.Trigger>
<Collapsible.Content>Content</Collapsible.Content>
</Collapsible.Root>
)
<script setup lang="ts">
import { Collapsible } from '@ark-ui/vue/collapsible'
</script>
<template>
<Collapsible.Root>
<Collapsible.Trigger>Toggle</Collapsible.Trigger>
<Collapsible.Content>Content</Collapsible.Content>
</Collapsible.Root>
</template>
Events
You can listen for the onExitComplete
event to know when the Collapsible.Content
is no longer
visible:
import { Collapsible } from '@ark-ui/react/collapsible'
export const OnExitComplete = () => (
<Collapsible.Root onExitComplete={() => alert('on exit')}>
<Collapsible.Trigger>Toggle</Collapsible.Trigger>
<Collapsible.Content>Content</Collapsible.Content>
</Collapsible.Root>
)
import { Collapsible } from '@ark-ui/solid/collapsible'
export const OnExitComplete = () => (
<Collapsible.Root onExitComplete={() => alert('on exit')}>
<Collapsible.Trigger>Toggle</Collapsible.Trigger>
<Collapsible.Content>Content</Collapsible.Content>
</Collapsible.Root>
)
<script setup lang="ts">
import { Collapsible } from '@ark-ui/vue/collapsible'
</script>
<template>
<Collapsible.Root @exit-complete="() => console.log('on exit')">
<Collapsible.Trigger>Toggle</Collapsible.Trigger>
<Collapsible.Content>Content</Collapsible.Content>
</Collapsible.Root>
</template>
Lazy Mount
To delay the mounting of the Collapsible.Content
, use the lazyMount
prop:
import { Collapsible } from '@ark-ui/react/collapsible'
export const LazyMount = () => (
<Collapsible.Root lazyMount>
<Collapsible.Trigger>Toggle</Collapsible.Trigger>
<Collapsible.Content>Content</Collapsible.Content>
</Collapsible.Root>
)
import { Collapsible } from '@ark-ui/solid/collapsible'
export const LazyMount = () => (
<Collapsible.Root lazyMount>
<Collapsible.Trigger>Toggle</Collapsible.Trigger>
<Collapsible.Content>Content</Collapsible.Content>
</Collapsible.Root>
)
<script setup lang="ts">
import { Collapsible } from '@ark-ui/vue/collapsible'
</script>
<template>
<Collapsible.Root lazyMount>
<Collapsible.Trigger>Toggle</Collapsible.Trigger>
<Collapsible.Content>Content</Collapsible.Content>
</Collapsible.Root>
</template>
Unmount on Exit
To remove the Collapsible.Content
from the DOM when it is not visible, use the unmountOnExit
prop:
import { Collapsible } from '@ark-ui/react/collapsible'
export const UnmountOnExit = () => (
<Collapsible.Root unmountOnExit>
<Collapsible.Trigger>Toggle</Collapsible.Trigger>
<Collapsible.Content>Content</Collapsible.Content>
</Collapsible.Root>
)
import { Collapsible } from '@ark-ui/solid/collapsible'
export const UnmountOnExit = () => (
<Collapsible.Root unmountOnExit>
<Collapsible.Trigger>Toggle</Collapsible.Trigger>
<Collapsible.Content>Content</Collapsible.Content>
</Collapsible.Root>
)
<script setup lang="ts">
import { Collapsible } from '@ark-ui/vue/collapsible'
</script>
<template>
<Collapsible.Root unmountOnExit>
<Collapsible.Trigger>Toggle</Collapsible.Trigger>
<Collapsible.Content>Content</Collapsible.Content>
</Collapsible.Root>
</template>
Combining Lazy Mount and Unmount on Exit
Both lazyMount
and unmountOnExit
can be combined to ensure that the component is mounted only
when the Collapsible
is expanded and unmounted when it is collapsed:
import { Collapsible } from '@ark-ui/react/collapsible'
export const LazyMountAndUnmountOnExit = () => (
<Collapsible.Root lazyMount unmountOnExit>
<Collapsible.Trigger>Toggle</Collapsible.Trigger>
<Collapsible.Content>Content</Collapsible.Content>
</Collapsible.Root>
)
import { Collapsible } from '@ark-ui/solid/collapsible'
export const LazyMountAndUnmountOnExit = () => (
<Collapsible.Root lazyMount unmountOnExit>
<Collapsible.Trigger>Toggle</Collapsible.Trigger>
<Collapsible.Content>Content</Collapsible.Content>
</Collapsible.Root>
)
<script setup lang="ts">
import { Collapsible } from '@ark-ui/vue/collapsible'
</script>
<template>
<Collapsible.Root lazyMount unmountOnExit>
<Collapsible.Trigger>Toggle</Collapsible.Trigger>
<Collapsible.Content>Content</Collapsible.Content>
</Collapsible.Root>
</template>
API Reference
Accessibility
Keyboard Support
Key | Description |
---|---|
Space | Opens/closes the collapsible. |
Enter | Opens/closes the collapsible. |