---
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: 2026-01
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2026-01/web-components/typography-and-content/details
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2026-01/web-components/typography-and-content/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.

### Support Targets (24)

### Supported targets

* customer-account.​footer.​render-after
* customer-account.​order-index.​announcement.​render
* customer-account.​order-index.​block.​render
* customer-account.​order-status.​announcement.​render
* customer-account.​order-status.​block.​render
* customer-account.​order-status.​cart-line-item.​render-after
* customer-account.​order-status.​cart-line-list.​render-after
* customer-account.​order-status.​customer-information.​render-after
* customer-account.​order-status.​fulfillment-details.​render-after
* customer-account.​order-status.​payment-details.​render-after
* customer-account.​order-status.​return-details.​render-after
* customer-account.​order-status.​unfulfilled-items.​render-after
* customer-account.​order.​action.​menu-item.​render
* customer-account.​order.​action.​render
* customer-account.​order.​page.​render
* customer-account.​page.​render
* customer-account.​profile.​addresses.​render-after
* customer-account.​profile.​announcement.​render
* customer-account.​profile.​block.​render
* customer-account.​profile.​company-details.​render-after
* customer-account.​profile.​company-location-addresses.​render-after
* customer-account.​profile.​company-location-payment.​render-after
* customer-account.​profile.​company-location-staff.​render-after
* customer-account.​profile.​payment.​render-after

## 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/latest/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
  ```

### 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

## Preview

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

### 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>
  ```