Details

Details provide collapsible content sections that can be expanded or hidden by the reader. Useful for explanations, optional information, or progressive disclosure. Collapsing behavior can be disabled to create a static block.

Properties

title

string optional
The title shown in the summary section.

icon

string optional
The icon displayed next to the title. Uses Scalar icon format. Defaults to line/arrow-chevron-right.

interactivity

string optional
Controls whether the component is interactive (details) or static (div).
Use "none" to render a non-collapsible container.

open

boolean optional
If true, the section starts expanded. The default behavior is for the section to start in a collapsed state.

Examples

Basic Collapsible Section

<scalar-tabs> <scalar-tab title="Custom HTML"> <scalar-detail title="More Info">

Here is some additional content. </scalar-detail>

markdown

<scalar-detail title="More Info">

Here is some additional content.
</scalar-detail>

</scalar-tab> <scalar-tab title="Directive">

:::scalar-detail{title="More Info"} Here is some additional content. :::

markdown

:::scalar-detail{title="More Info"}
Here is some additional content.
:::

</scalar-tab> </scalar-tabs>

Open by Default

<scalar-tabs> <scalar-tab title="Custom HTML"> <scalar-detail title="Default Open" open>

The section is open by default. </scalar-detail>

markdown

<scalar-detail title="Default Open" open>

The section is open by default.
</scalar-detail>

</scalar-tab> <scalar-tab title="Directive">

:::scalar-detail{title="Default Open" open='true'} The section is open by default. :::

markdown

:::scalar-detail{title="Default Open" open='true'}
The section is open by default.
:::

</scalar-tab> </scalar-tabs>

With Custom Icon

<scalar-tabs> <scalar-tab title="Custom HTML"> <scalar-detail title="Custom Icon" icon="airplane">

Using a custom icon. </scalar-detail>

markdown

<scalar-detail title="Custom Icon" icon="airplane">

Using a custom icon.
</scalar-detail>

</scalar-tab> <scalar-tab title="Directive">

:::scalar-detail{title="Custom Icon" icon="airplane" } Using a custom icon. :::

markdown

:::scalar-detail{title="Custom Icon" icon="airplane"}
Using a custom icon.
:::

</scalar-tab> </scalar-tabs>

Non-interactive Block

<scalar-tabs> <scalar-tab title="Custom HTML"> <scalar-detail title="Non-Interactive" interactivity=none>

These do not collapse when clicked. </scalar-detail>

markdown

<scalar-detail title="Non-Interactive">

These do not collapse when clicked.
</scalar-detail>

</scalar-tab> <scalar-tab title="Directive">

:::scalar-detail{title="Non-Interactive" interactivity="none" } These do not collapse when clicked. :::

markdown

:::scalar-detail{title="Non-Interactive" interactivity="none" }
These do not collapse when clicked.
:::

</scalar-tab> </scalar-tabs>

Nested

<scalar-tabs> <scalar-tab title="Custom HTML"> <scalar-detail title="Nested, Outer" >

Outer details content.

<scalar-detail title="Nested, Inner" >

Inner details content. </scalar-detail>

</scalar-detail>

markdown

<scalar-detail title="Nested, Outer" >

Outer details content.
<scalar-detail title="Nested, Inner" >

Inner details content.
</scalar-detail>
</scalar-detail>

</scalar-tab> <scalar-tab title="Directive">

::::scalar-detail{title="Nested, Outer" } With directives, the parent must have at least 1 more : than the elements it wraps.

:::scalar-detail{title="Non-Interactive" } Inner details content. ::: ::::

markdown

::::scalar-detail{title="Nested, Outer" }
With directives, the parent must have at least 1 more `:` than the elements it wraps.

:::scalar-detail{title="Non-Interactive" }
Inner details content.
:::
::::