---
title: Details
description: Creates a collapsible content area that can be expanded or collapsed by users. Use with Summary to provide expandable sections for additional information or settings.
api_version: 2025-10
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/interactive/details
  md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/interactive/details.md
---

# Details

Creates a collapsible content area that can be expanded or collapsed by users. Use with Summary to provide expandable sections for additional information or settings.

## Properties

* defaultOpen

  boolean

  Default: false

  Indicates whether the element should be open by default.

  This reflects to the `open` attribute.

* id

  string

  A unique identifier for the element.

* open

  boolean

  Default: false

  Whether the element is open.

  This does not reflect to any attribute.

* toggleTransition

  'none' | 'auto'

  Default: 'auto'

  Sets the transition between the two states.

## Events

Learn more about [registering events](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/using-polaris-components#event-handling).

* aftertoggle

  CallbackEventListener\<typeof tagName, ToggleArgumentsEvent>

  Callback fired when the element state changes **after** any animations have finished.

  * If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.
  * If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the `newState` will be `closed`.

* toggle

  CallbackEventListener\<typeof tagName, ToggleArgumentsEvent>

  Callback straight after the element state changes.

  * If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.
  * If the element is transitioning from showing to hidden, then `oldState` property will be set to `open` and the `newState` will be `closed`.

### CallbackEventListener

```ts
(EventListener & {
    (event: CallbackEvent<TTagName, Event> & TData): void;
}) | null
```

### CallbackEvent

```ts
TEvent & {
    currentTarget: HTMLElementTagNameMap[TTagName];
}
```

### ToggleArgumentsEvent

* newState

  ```ts
  ToggleState
  ```

* oldState

  ```ts
  ToggleState
  ```

```ts
export interface ToggleArgumentsEvent {
    oldState?: ToggleState;
    newState?: ToggleState;
}
```

### ToggleState

```ts
'open' | 'closed'
```

## Summary

Provides a clickable label for collapsible Details content. Use to create clear, accessible disclosure controls that show or hide additional information.

* id

  string

  A unique identifier for the element.

### Examples

* #### Code

  ##### Default

  ```html
  <s-details defaultOpen>
    <s-summary>Pickup instructions</s-summary>
    <s-text>
      Curbside pickup is at the back of the warehouse. Park in a stall and follow the signs.
    </s-text>
  </s-details>
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/details-default.png)