---
title: createDisclosureState
description: Track open-state metadata, dynamic content height measurements, and
  data attributes for collapsible panels.
package: moraine
version: 0.6.0
repository: https://github.com/subframe7536/moraine
---

# createDisclosureState

> Track open-state metadata, dynamic content height measurements, and data attributes for collapsible panels.

`createDisclosureState` manages state, content height measurements, and DOM data attributes for expandable/collapsible components like `Collapsible` and `Accordion`.

## Import

```tsx
import { createDisclosureState } from 'moraine/utils'
```

## Signature

```ts
function createDisclosureState(options: CreateDisclosureStateOptions): {
  readonly contentHeight: Accessor<number>
  readonly dataAttrs: Accessor<{
    'data-closed'?: string
    'data-disabled'?: string
    'data-expanded'?: string
  }>
  readonly disabled: Accessor<boolean>
  readonly setContentElement: (element: HTMLElement | undefined) => void
  readonly registerElement: (element: HTMLElement) => () => void
}

interface CreateDisclosureStateOptions {
  disabled?: Accessor<boolean>
  open: Accessor<boolean>
}
```

## Usage Example

```tsx title="src/MyCollapsible.tsx"
import { createSignal } from 'solid-js'
import { createDisclosureState } from 'moraine/utils'

export function MyCollapsible() {
  const [open, setOpen] = createSignal(false)
  const disclosure = createDisclosureState({ open })

  return (
    <div>
      <button onClick={() => setOpen(!open())}>Toggle Panel</button>

      <div
        {...disclosure.dataAttrs()}
        ref={disclosure.setContentElement}
        style={{
          '--mo-collapsible-content-height': `${disclosure.contentHeight()}px`,
        }}
        class="overflow-hidden transition-[height] duration-200"
      >
        <div class="p-4 bg-muted rounded-md">Collapsible panel content dynamically measured!</div>
      </div>
    </div>
  )
}
```

## Features

- **Height Tracking**: Automatically attaches a `ResizeObserver` to the content element to measure `scrollHeight` accurately even when children change dynamically.
- **Data Attributes**: Supplies `data-expanded`, `data-closed`, and `data-disabled` to drive CSS animations and transitions cleanly.