Skip to main content

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.

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.

Was this section helpful?

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.

Was this section helpful?

Anchor to eventsEvents

Anchor to aftertoggle
aftertoggle
((event: <typeof tagName>) => void) | null

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
((event: <typeof tagName>) => void) | null

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.
Was this section helpful?

Code

<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