Collapsible

An interactive component which expands/collapses a panel.

Props

Disabled

Features

🎹 Keyboard navigation

Usage

Builder
Component

<script lang="ts">
  import { Collapsible } from "melt";

  const collapsible = new Collapsible();
</script>

<button {...collapsible.trigger}>Open/Close content</button>

{#if collapsible.open}
    <div {...collapsible.content}>Content</div>
{/if}

<script lang="ts">
  import { Collapsible } from "melt/components";
</script>

<Collapsible>
  {#snippet children(collapsible)}
      <button {...collapsible.trigger}>Open/Close content</button>

      {#if collapsible.open}
          <div {...collapsible.content}>Content</div>
      {/if}
  {/snippet}
</Collapsible>

API Reference

Constructor Props

The props that are passed when calling

new Collapsible()

export type CollapsibleProps = {
  /**
   * Whether the collapsible is disabled which prevents it from being opened.
   */
  disabled?: MaybeGetter<boolean | undefined>;

  /**
   * Whether the collapsible is open.
   */
  open?: MaybeGetter<boolean | undefined>;

  /**
   * A callback called when the value of `open` changes.
   */
  onOpenChange?: (value: boolean) => void;
};

export type CollapsibleProps = {
  /**
   * Whether the collapsible is disabled which prevents it from being opened.
   */
  disabled?: MaybeGetter<boolean | undefined>;

  /**
   * Whether the collapsible is open.
   */
  open?: MaybeGetter<boolean | undefined>;

  /**
   * A callback called when the value of `open` changes.
   */
  onOpenChange?: (value: boolean) => void;
};

Properties

The properties returned from

new Collapsible()

disabled
```
boolean
```
```
boolean
```
open
```
boolean
```
```
boolean
```
The open state of the collapsible.

trigger

{
  readonly disabled: boolean
  readonly onclick: () => void
  readonly "data-state": string
  readonly "data-disabled": "" | undefined
  readonly "data-melt-collapsible-trigger": ""
  readonly id: string
  readonly "aria-expanded": boolean
  readonly "aria-controls": string
}

{
  readonly disabled: boolean
  readonly onclick: () => void
  readonly "data-state": string
  readonly "data-disabled": "" | undefined
  readonly "data-melt-collapsible-trigger": ""
  readonly id: string
  readonly "aria-expanded": boolean
  readonly "aria-controls": string
}

The spread attributes for the trigger button.

content

{
  readonly "data-state": string
  readonly "data-disabled": "" | undefined
  readonly "data-melt-collapsible-content": ""
  readonly id: string
}

The spread attributes for the content element.