> For the complete documentation index, see [llms.txt](https://analog.groupthought.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://analog.groupthought.com/reference/alpine/disclosure.md).

# x-disclosure

Directives and magics for disclosures (a button that shows and hides a panel) and for accordion groups.

Directives and magics for disclosures (a button that shows and hides a panel) and for accordion groups.

| Directive / magic                                    | What it does                                                                                                                                                      |
| ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `x-disclosure`                                       | The root. Holds the expanded state (collapsed by default)                                                                                                         |
| `x-disclosure="true"`                                | Starts expanded. Also accepts an options object                                                                                                                   |
| `x-disclosure.expand`                                | Starts expanded, as a modifier                                                                                                                                    |
| `x-disclosure.noanimate`                             | Hides the panel immediately instead of waiting for animations                                                                                                     |
| `x-disclosure:button`                                | The toggle button (`aria-expanded`, `aria-controls`)                                                                                                              |
| `x-disclosure:panel`                                 | The content. Gets the `hidden` attribute while collapsed                                                                                                          |
| `x-disclosure-group`                                 | Wraps disclosures into a single-select accordion                                                                                                                  |
| `x-disclosure-group.multiple`                        | Lets several disclosures in the group stay open at once                                                                                                           |
| `x-disclosure-group="{ initiallyExpandedIndex: 0 }"` | Options object                                                                                                                                                    |
| `$disclosure`                                        | The state, readable anywhere inside the root: `isExpanded`, `isCollapsed`, `toggle()`, `expand()`, `collapse()`, `isInGroup`, `groupIndex`, `waitForAnimations()` |
| `$disclosureGroup`                                   | The group state: `expandedIndex` (or `expandedIndices`), `isExpanded(i)`, `expand(i)`, `collapse(i)`, `toggle(i)`, `items`                                        |

The button gets `aria-expanded`, `aria-controls`, and `role="button"` when it isn't a native `<button>`. The panel gets `role="group"`, `aria-labelledby`, and the `hidden` attribute while collapsed. The root dispatches `expand` and `collapse` after state changes. By default, the disclosure waits for panel animations before hiding it. This requires the assembly-ui `animations` plugin. Add `data-skip-animation-wait` to elements whose animations should not hold up the change.

## Examples

### A basic disclosure

Use `x-disclosure:button` and `x-disclosure:panel` inside an `x-disclosure` root:

```html
<div x-disclosure>
  <button x-disclosure:button>Shipping details</button>
  <div x-disclosure:panel>
    <p>Ships in 2–4 days.</p>
  </div>
</div>
```

### Starting expanded

Use the `.expand` modifier to open a disclosure on load:

```html
<div x-disclosure.expand>…</div>
```

Accordion blocks map their "Expand initially" setting to this modifier.

### Styling by state

Use `$disclosure.isExpanded` (or the button's `aria-expanded`) to style each state:

```html
<div x-disclosure :data-state="$disclosure.isExpanded ? 'open' : 'closed'">
  <button x-disclosure:button class="group">
    …
    <span class="transition-transform group-aria-expanded:rotate-180">▾</span>
  </button>
  …
</div>
```

The accordion sections bind `data-state` this way, and chevrons rotate off the `aria-expanded` attribute the button already carries.

### An accordion group

Use `x-disclosure-group` to make opening one disclosure close the others:

```html
<div x-disclosure-group>
  <div x-disclosure>…</div>
  <div x-disclosure>…</div>
  <div x-disclosure>…</div>
</div>
```

The cart drawer wraps its reorderable blocks (order notes, shipping estimate, review) this way, so only one is open at a time. Inside a group, `$disclosure.groupIndex` gives each disclosure its position. The accordion sections use it to build stable element ids. Only direct children join the group: a disclosure nested inside a grouped disclosure keeps its own state.

### Binding to external state

Use a get/set pair for `isExpanded` to drive the disclosure from your own data:

```html
<div x-data="{ showDetails: false }">
  <div
    x-disclosure="{
      get isExpanded() { return this.showDetails },
      set isExpanded(value) { this.showDetails = value }
    }"
  >
    …
  </div>
</div>
```

## Options

| Option       | What it does                                                                     |
| ------------ | -------------------------------------------------------------------------------- |
| `isExpanded` | The expanded state (default `false`). Accepts a get/set pair for two-way binding |

Group options (`x-disclosure-group`):

| Option                     | What it does                                                                                                            |
| -------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| `multiple`                 | Multi-select group, same as the `.multiple` modifier                                                                    |
| `initiallyExpandedIndex`   | The disclosure to open on load (single-select)                                                                          |
| `expandedIndex`            | The open disclosure. Accepts a get/set pair (single-select)                                                             |
| `initiallyExpandedIndices` | A `Set` of indices to open on load (multi-select)                                                                       |
| `expandedIndices`          | The open disclosures as a `Set`. Accepts a get/set pair (multi-select)                                                  |
| `getIndex`                 | Resolves an element's index before registration order. [x-tabs](/reference/alpine/tabs.md) uses it for explicit indices |

To sync an accordion with a slideshow in a Pair section, see [Pair sections](/building-pages/pair.md).