Choose a version:

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

Anchor to propertiesProperties

Anchor to defaultOpen defaultOpen boolean Default: false: Indicates whether the element should be open by default.

This reflects to the open attribute.
Anchor to id id string: A unique identifier for the element.
Anchor to open open boolean Default: false: Whether the element is open.

This does not reflect to any attribute.
Anchor to toggleTransition toggleTransition 'none' | 'auto' Default: 'auto': Sets the transition between the two states.

Anchor to eventsEvents

Learn more about registering events.

Anchor to aftertoggle aftertoggle <typeof tagName, >: 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.
Anchor to toggle toggle <typeof tagName, >: 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

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

CallbackEvent

TEvent & {
    currentTarget: HTMLElementTagNameMap[TTagName];
}

ToggleArgumentsEvent

newState
```
ToggleState
```
oldState
```
ToggleState
```

ToggleState

'open' | 'closed'

Anchor to summarySummary

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

Anchor to id id string: A unique identifier for the element.

Examples

<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

Examples

Code

Default

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

Was this page helpful?