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.

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

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

ToggleState

'open' | 'closed'

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?

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>

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>

Details

Anchor to propertiesProperties

Anchor to eventsEvents

CallbackEventListener

CallbackEvent

ToggleArgumentsEvent

ToggleState

Anchor to summarySummary

Examples

Code

Default

Preview