Collapsible

An interactive component which expands and collapses a content area.

Show Code

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

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

import { Collapsible } from '@destyler-ui/react'

export function Basic(props: Collapsible.RootProps) {
  return (
    <Collapsible.Root {...props}>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>Content</Collapsible.Content>
    </Collapsible.Root>
  )
}

import { Collapsible } from '@destyler-ui/solid/collapsible'

export function Basic() {
  return (
    <Collapsible.Root>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>Content</Collapsible.Content>
    </Collapsible.Root>
  )
}

<script lang="ts">
  import type { CollapsibleRootProps } from '@destyler-ui/svelte'
  import { Collapsible } from '@destyler-ui/svelte'
  const props: CollapsibleRootProps = $props()
</script>
<Collapsible.Root {...props}>
  <Collapsible.Trigger>Toggle</Collapsible.Trigger>
  <Collapsible.Content>Content</Collapsible.Content>
</Collapsible.Root>

Anatomy

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

<template>
  <Collapsible.Root>
    <Collapsible.Trigger />
    <Collapsible.Content />
  </Collapsible.Root>
</template>

import { Collapsible } from '@destyler-ui/react'

export default function Basic() {
  return (
    <Collapsible.Root>
      <Collapsible.Trigger />
      <Collapsible.Content />
    </Collapsible.Root>
  )
}

import { Collapsible } from '@destyler-ui/solid'

export default function Basic() {
  return (
    <Collapsible.Root>
      <Collapsible.Trigger />
      <Collapsible.Content />
    </Collapsible.Root>
  )
}

<script lang="ts">
  import { Collapsible } from '@destyler-ui/svelte'
</script>

<Collapsible.Root>
  <Collapsible.Trigger>Toggle</Collapsible.Trigger>
  <Collapsible.Content>Content</Collapsible.Content>
</Collapsible.Root>

Examples

Basic

Show Code

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

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

import { Collapsible } from '@destyler-ui/react'

export function Basic(props: Collapsible.RootProps) {
  return (
    <Collapsible.Root {...props}>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>Content</Collapsible.Content>
    </Collapsible.Root>
  )
}

import { Collapsible } from '@destyler-ui/solid/collapsible'

export function Basic() {
  return (
    <Collapsible.Root>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>Content</Collapsible.Content>
    </Collapsible.Root>
  )
}

<script lang="ts">
  import type { CollapsibleRootProps } from '@destyler-ui/svelte'
  import { Collapsible } from '@destyler-ui/svelte'
  const props: CollapsibleRootProps = $props()
</script>
<Collapsible.Root {...props}>
  <Collapsible.Trigger>Toggle</Collapsible.Trigger>
  <Collapsible.Content>Content</Collapsible.Content>
</Collapsible.Root>

Controlled

Control the open state of the collapsible programmatically.

Show Code

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

const open = ref(false)
</script>

<template>
  <button type="button" @click="() => (open = true)">Open</button>
  <Collapsible.Root v-model:open="open">
    <Collapsible.Trigger>Toggle</Collapsible.Trigger>
    <Collapsible.Content>Content</Collapsible.Content>
  </Collapsible.Root>
</template>

import { useState } from 'react'
import { Collapsible } from '@destyler-ui/react'

export function Controlled() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <button type="button" onClick={() => setOpen(true)}>Open</button>
      <Collapsible.Root open={open} onOpenChange={({ open }) => setOpen(open)}>
        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
        <Collapsible.Content>Content</Collapsible.Content>
      </Collapsible.Root>
    </>
  )
}

import { Collapsible } from '@destyler-ui/solid/collapsible'
import { createSignal } from 'solid-js'

export function Controlled() {
  const [open, setOpen] = createSignal(false)

  return (
    <>
      <button type="button" onClick={() => setOpen(true)}>Open</button>
      <Collapsible.Root open={open()} onOpenChange={({ open }) => setOpen(open)}>
        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
        <Collapsible.Content>Content</Collapsible.Content>
      </Collapsible.Root>
    </>
  )
}

<script lang="ts">
  import { Collapsible } from '@destyler-ui/svelte'

  let open = $state(false)
</script>

<button type="button" onclick={() => open = true}>Open</button>
<Collapsible.Root bind:open>
  <Collapsible.Trigger>Toggle</Collapsible.Trigger>
  <Collapsible.Content>Content</Collapsible.Content>
</Collapsible.Root>

Initial Open

Open the collapsible by default.

Show Code

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

<template>
  <Collapsible.Root defaultOpen>
    <Collapsible.Trigger>Toggle</Collapsible.Trigger>
    <Collapsible.Content>Content</Collapsible.Content>
  </Collapsible.Root>
</template>

import { Collapsible } from '@destyler-ui/react'

export function InitialOpen() {
  return (
    <Collapsible.Root defaultOpen>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>Content</Collapsible.Content>
    </Collapsible.Root>
  )
}

import { Collapsible } from '@destyler-ui/solid/collapsible'

export function InitialOpen() {
  return (
    <Collapsible.Root defaultOpen>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>Content</Collapsible.Content>
    </Collapsible.Root>
  )
}

<script lang="ts">import { Collapsible } from '@destyler-ui/svelte'</script>
<Collapsible.Root defaultOpen><Collapsible.Trigger>Toggle</Collapsible.Trigger><Collapsible.Content>Content</Collapsible.Content></Collapsible.Root>

Lazy Mount

Mount the content lazily when first opened.

Show Code

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

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

import { Collapsible } from '@destyler-ui/react'

export function LazyMount() {
  return (
    <Collapsible.Root lazyMount>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>Content</Collapsible.Content>
    </Collapsible.Root>
  )
}

import { Collapsible } from '@destyler-ui/solid/collapsible'

export function LazyMount() {
  return (
    <Collapsible.Root lazyMount>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>Content</Collapsible.Content>
    </Collapsible.Root>
  )
}

<script lang="ts">import { Collapsible } from '@destyler-ui/svelte'</script>
<Collapsible.Root lazyMount><Collapsible.Trigger>Toggle</Collapsible.Trigger><Collapsible.Content>Content</Collapsible.Content></Collapsible.Root>

Unmount On Exit

Unmount the content when the collapsible is closed.

Show Code

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

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

import { Collapsible } from '@destyler-ui/react'

export function UnmountOnExit() {
  return (
    <Collapsible.Root unmountOnExit>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>Content</Collapsible.Content>
    </Collapsible.Root>
  )
}

import { Collapsible } from '@destyler-ui/solid/collapsible'

export function UnmountOnExit() {
  return (
    <Collapsible.Root unmountOnExit>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>Content</Collapsible.Content>
    </Collapsible.Root>
  )
}

<script lang="ts">import { Collapsible } from '@destyler-ui/svelte'</script>
<Collapsible.Root unmountOnExit><Collapsible.Trigger>Toggle</Collapsible.Trigger><Collapsible.Content>Content</Collapsible.Content></Collapsible.Root>

Lazy Mount And Unmount On Exit

Combine lazy mounting with unmount on exit.

Show Code

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

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

import { Collapsible } from '@destyler-ui/react'

export function LazyMountAndUnmountOnExit() {
  return (
    <Collapsible.Root lazyMount unmountOnExit>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>Content</Collapsible.Content>
    </Collapsible.Root>
  )
}

import { Collapsible } from '@destyler-ui/solid/collapsible'

export function LazyMountAndUnmountOnExit() {
  return (
    <Collapsible.Root lazyMount unmountOnExit>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>Content</Collapsible.Content>
    </Collapsible.Root>
  )
}

<script lang="ts">import { Collapsible } from '@destyler-ui/svelte'</script>
<Collapsible.Root lazyMount unmountOnExit><Collapsible.Trigger>Toggle</Collapsible.Trigger><Collapsible.Content>Content</Collapsible.Content></Collapsible.Root>

On Exit Complete

Handle the exit complete event.

Show Code

<script setup lang="ts">
import { Collapsible } from '@destyler-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>

import { Collapsible } from '@destyler-ui/react'

export function OnExitComplete() {
  return (
    <Collapsible.Root onExitComplete={
      // eslint-disable-next-line no-alert
      () => alert('on exit')
    }
    >
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>Content</Collapsible.Content>
    </Collapsible.Root>
  )
}

import { Collapsible } from '@destyler-ui/solid/collapsible'

export function OnExitComplete() {
  return (
    <Collapsible.Root onExitComplete={() => console.warn('on exit')}>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>Content</Collapsible.Content>
    </Collapsible.Root>
  )
}

<script lang="ts">import { Collapsible } from '@destyler-ui/svelte'</script>
<Collapsible.Root onExitComplete={() => console.log('on exit')}><Collapsible.Trigger>Toggle</Collapsible.Trigger><Collapsible.Content>Content</Collapsible.Content></Collapsible.Root>

Root Provider

Show Code

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

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>

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

export function 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 '@destyler-ui/solid/collapsible'

export function 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 lang="ts">
  import { Collapsible, useCollapsible } from '@destyler-ui/svelte'
  const id = $props.id()
  const collapsible = useCollapsible({ id })
</script>
<span>{collapsible().visible ? 'Visible' : 'Hidden'}</span>
<Collapsible.RootProvider value={collapsible}><Collapsible.Trigger>Toggle</Collapsible.Trigger><Collapsible.Content>Content</Collapsible.Content></Collapsible.RootProvider>

API Reference

Root

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
defaultOpen	—	false | true The initial open state of the collapsible when it is first rendered. Use when you do not need to control its open state.
disabled	—	false | true 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.
lazyMount	false	false | true Whether to enable lazy mounting
open	—	false | true The controlled open state of the collapsible. Can be binded with v-model.
unmountOnExit	false	false | true Whether to unmount on exit.

Emit	Event
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.

Content

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Context

No serializable props or emits are declared for this part.

RootProvider

Prop	Default	Type
value*	—	Collapsible
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Trigger

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
defaultOpen	—	false | true The initial open state of the collapsible when it is first rendered. Use when you do not need to control its open state.
disabled	—	false | true Whether the collapsible is disabled
ids	—	Partial<{ root: string; content: string; trigger: string; }> The ids of the elements in the collapsible. Useful for composition.
lazyMount	false	false | true Whether to enable lazy mounting
onExitComplete	—	() => void Function called when the animation ends in the closed state.
onOpenChange	—	(details: collapsible.OpenChangeDetails) => void Function called when the popup is opened
open	—	false | true Whether the collapsible is open
unmountOnExit	false	false | true Whether to unmount on exit.

Content

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
children*	—	(context: UseCollapsibleContext) => ReactNode

RootProvider

Prop	Default	Type
value*	—	UseCollapsibleReturn
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Trigger

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
asChild	—	(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.
defaultOpen	—	false | true The initial open state of the collapsible when it is first rendered. Use when you do not need to control its open state.
disabled	—	false | true Whether the collapsible is disabled
ids	—	Partial<{ root: string; content: string; trigger: string; }> The ids of the elements in the collapsible. Useful for composition.
lazyMount	false	false | true Whether to enable lazy mounting
onExitComplete	—	() => void Function called when the animation ends in the closed state.
onOpenChange	—	(details: OpenChangeDetails) => void Function called when the popup is opened
open	—	false | true Whether the collapsible is open
unmountOnExit	false	false | true Whether to unmount on exit.

Content

Prop	Default	Type
asChild	—	(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
children*	—	(context: UseCollapsibleContext) => Element

RootProvider

Prop	Default	Type
value*	—	UseCollapsibleReturn
asChild	—	(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Trigger

Prop	Default	Type
asChild	—	(props: (userProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children	—	Snippet<[]> | undefined
defaultOpen	—	false | true The initial open state of the collapsible when it is not controlled. Prefer this over seeding with `open` for uncontrolled usage.
disabled	—	false | true Whether the collapsible is disabled
id	—	string
ids	—	Partial<{ root: string; content: string; trigger: string; }> The ids of the elements in the collapsible. Useful for composition.
lazyMount	—	false | true Whether the content should be lazy mounted
onExitComplete	—	() => void Callback fired when the animation ends
onOpenChange	—	(details: import("@destyler/collapsible").OpenChangeDetails) => void Function called when the popup is opened
open	—	false | true Whether the collapsible is open
unmountOnExit	—	false | true Whether the content should be unmounted when collapsed

Content

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

Context

Prop	Default	Type
render	—	Snippet<[UseCollapsibleContext]>

RootProvider

Prop	Default	Type
value*	—	UseCollapsibleReturn
asChild	—	import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

Trigger

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("../../../types.js").PropsFn<"button">]>
children	—	Snippet<[]> | undefined