Ark Logo

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='accordion'][data-part='item-content'][data-state='open'] {
  animation: slideDown 250ms;
}

[data-scope='accordion'][data-part='item-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:

<script setup lang="ts">
import { Collapsible } from '@ark-ui/vue'
</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:

<script setup lang="ts">
import { Collapsible } from '@ark-ui/vue'
</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:

<script setup lang="ts">
import { Collapsible } from '@ark-ui/vue'
</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:

<script setup lang="ts">
import { Collapsible } from '@ark-ui/vue'
</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:

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

<template>
  <Collapsible.Root lazyMount unmountOnExit>
    <Collapsible.Trigger>Toggle</Collapsible.Trigger>
    <Collapsible.Content>Content</Collapsible.Content>
  </Collapsible.Root>
</template>

API Reference

Root

PropDefaultType
asChildfalse
boolean

defaultOpen
boolean

The initial open state of the collapsible when it is first rendered. Use when you do not need to control its open state.

disabled
boolean

Whether the collapsible is disabled

id
string

The unique identifier of the machine.

ids
Partial<{ root: string; content: string; trigger: string }>

The ids of the elements in the collapsible. Useful for composition.

lazyMountfalse
boolean

Whether to enable lazy mounting

open
boolean

The controlled open state of the collapsible. Can be binded with v-model.

unmountOnExitfalse
boolean

Whether to unmount on exit.

EmitEvent
exitComplete
[]

Function called when the animation ends in the closed state.

openChange
[details: OpenChangeDetails]

Function called when the popup is opened

update:open
[open: boolean]

Event handler called when the open state of the collapsible changes.

Data AttributeValue
[data-scope]collapsible
[data-part]root
[data-state]"open" | "closed"

Content

PropDefaultType
asChildfalse
boolean

Data AttributeValue
[data-scope]collapsible
[data-part]content
[data-state]"open" | "closed"
[data-disabled]Present when disabled

Trigger

PropDefaultType
asChildfalse
boolean

Data AttributeValue
[data-scope]collapsible
[data-part]trigger
[data-state]"open" | "closed"
[data-disabled]Present when disabled

Accessibility

Keyboard Support

KeyDescription
Space
Opens/closes the collapsible.
Enter
Opens/closes the collapsible.