--- 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-04 source_url: html: >- https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/details md: >- https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/details.md --- # Details The details component creates a collapsible content area that customers can expand or collapse to reveal additional information. Use details to keep secondary content like policies, instructions, or settings out of the main flow until needed. Details works with the summary component to provide an accessible disclosure control. For static content that's always visible, use [text](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/text) or [paragraph](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/paragraph) instead. Nested `s-details` elements aren't officially supported and might cause inconsistent expand or collapse behavior across browsers. ### Support Targets (24) ### Supported targets * [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/footer#footer-render-after-) * [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-announcement-) * [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-block-) * [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-announcement-) * [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-block-) * [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-item-render-after-) * [customer-account.​order-status.​cart-line-list.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-list-render-after-) * [customer-account.​order-status.​customer-information.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#customer-information-render-after-) * [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#fulfillment-status-targets) * [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#payments-and-returns-targets) * [customer-account.​order-status.​return-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#return-details-render-after-) * [customer-account.​order-status.​unfulfilled-items.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#unfulfilled-items-render-after-) * [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-menu-item-) * [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-) * [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#order-specific-full-page-) * [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#customer-account-full-page-) * [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-page-default-targets-) * [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-announcement-) * [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-block-) * [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#profile-page-b2b-targets-) * [customer-account.​profile.​company-location-addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-addresses-render-after-) * [customer-account.​profile.​company-location-payment.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-payment-render-after-) * [customer-account.​profile.​company-location-staff.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-staff-render-after-) * customer-account.​profile.​payment.​render-after #### Use cases * **Pickup instructions**: Hide store-specific pickup details behind a toggle to keep the customer account layout clean. * **Return policies**: Let customers expand a collapsible summary to read full return and refund terms. * **Shipping options**: Present delivery method breakdowns inside a disclosure so customers expand them on demand. * **Order notes**: Provide an expandable section for gift messages or special instructions without cluttering the page. *** ## Properties Configure the following properties on the details component. * **defaultOpen** **boolean** **Default: false** Whether the element should be open when it first renders. Use this for uncontrolled behavior where the component manages its own open state after the initial render. * **id** **string** A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting. * **open** **boolean** **Default: false** Whether the element is currently open and showing its content. Use this for controlled behavior where you manage the open state yourself. * **toggleTransition** **'none' | 'auto'** **Default: 'auto'** Sets the animation transition between the open and closed states. * `none`: Disables all transition animations. * `auto`: Uses the default transition animation. *** ## Events The details component provides event callbacks for handling user interactions. Learn more about [handling events](https://shopify.dev/docs/api/polaris/using-polaris-web-components#handling-events). * **aftertoggle** **CallbackEventListener\** A callback fired when the element state changes, after any toggle 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`. Learn more about the [`newState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState). * **toggle** **CallbackEventListener\** A callback fired immediately when the element state changes, before any animations. * 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 the `oldState` property will be set to `open` and the `newState` will be `closed`. Learn more about the [`toggle` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), and the [`newState`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState) properties. ### CallbackEventListener A typed event listener for custom element events. The listener receives a \`CallbackEvent\` with the correct \`currentTarget\` type for the associated custom element tag. ```ts (EventListener & { (event: CallbackEvent): void; }) | null ``` ### CallbackEvent An event type that narrows the \`currentTarget\` to the specific HTML element associated with the custom element tag. This provides type-safe event handling in callback listeners. ```ts TEvent & { currentTarget: HTMLElementTagNameMap[TTagName]; } ``` ### ToggleArgumentsEvent The event data provided to toggle-related callbacks. Contains the previous and next visibility states of the element. * newState The visibility state of the element after the toggle occurred. ```ts ToggleState ``` * oldState The visibility state of the element before the toggle occurred. ```ts ToggleState ``` ### ToggleState The visibility state of a toggleable element. - \`open\`: The element is visible and showing its content. - \`closed\`: The element is hidden and its content is not visible. ```ts 'open' | 'closed' ``` *** ## Summary Represents the visible heading of a details disclosure. Use only as a child of `s-details` components. * **id** **string** A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting. *** ## Examples ### Create a collapsible section Hide supplementary content until the customer chooses to expand it. This example wraps pickup instructions in `s-details` with an `s-summary` label. ## Create a collapsible section ![An expandable disclosure element with a summary label that reveals hidden content when toggled.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/details-default-B9CikpH3.png) ## html ```html Pickup instructions Curbside pickup is at the back of the warehouse. Park in a stall and follow the signs. ``` ### Nest lines inside one disclosure Group several related lines under a single expandable label. This example wraps standard, express, and overnight rates in one `s-details` with stacked text inside. ## html ```html Shipping options Standard: 5-7 business days - Free Express: 2-3 business days - $9.99 Overnight: Next business day - $24.99 ``` *** ## Best practices * **Write a clear summary label**: Make the `s-summary` text descriptive enough that customers know what they'll find when they expand the section. * **Default to collapsed**: Keep `s-details` closed unless the content is critical to the customer account, so the page stays uncluttered. * **Don't nest disclosures**: Avoid placing disclosures inside other disclosures, as this can cause inconsistent behavior. * **Use for supplementary content**: Reserve collapsible sections for information customers may want but don't need to see upfront. ***