Collapsible

An interactive component that can be expanded or collapsed.

Content

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>

Using the Root Provider

The RootProvider component provides a context for the collapsible. It accepts the value of the useCollapsible hook. You can leverage it to access the component state and methods from outside the collapsible.

import { Collapsible, useCollapsible } from '@ark-ui/react/collapsible'

export const RootProvider = () => {
  const collapsible = useCollapsible()

  return (
    <>
      <span>{collapsible.visible ? 'Visible' : 'Hidden'}</span>

      <Collapsible.RootProvider value={collapsible}>
        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
        <Collapsible.Content>Content</Collapsible.Content>
      </Collapsible.RootProvider>
    </>
  )
}

import { Collapsible, useCollapsible } from '@ark-ui/solid/collapsible'

export const RootProvider = () => {
  const collapsible = useCollapsible()

  return (
    <>
      <span>{collapsible().visible ? 'Visible' : 'Hidden'}</span>

      <Collapsible.RootProvider value={collapsible}>
        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
        <Collapsible.Content>Content</Collapsible.Content>
      </Collapsible.RootProvider>
    </>
  )
}

<script setup lang="ts">
import { Collapsible, useCollapsible } from '@ark-ui/vue/collapsible'

const collapsible = useCollapsible()
</script>

<template>
  <span>{{ collapsible.visible ? 'Visible' : 'Hidden' }}</span>

  <Collapsible.RootProvider :value="collapsible">
    <Collapsible.Trigger>Toggle</Collapsible.Trigger>
    <Collapsible.Content>Content</Collapsible.Content>
  </Collapsible.RootProvider>
</template>

If you're using the RootProvider component, you don't need to use the Root component.

API Reference

Accessibility

Keyboard Support

Key	Description
`Space`	Opens/closes the collapsible.
`Enter`	Opens/closes the collapsible.