Welcome Pages
Pages are now available as full-screen example templates that showcase real-world use cases and best practices for composing interfaces with the aFP Design System.
Dark Light
System Default LBBW Jira Confluence Source Code
Share Playground

Details

<afp-details> Since 1.0.0 stable This component uses the light DOM, so its markup and styles are part of the regular document flow.

A collapsible section that can expand or collapse to show or hide content.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, dicta dolor doloribus dolorum fugit illum laudantium magni, maiores officiis provident quam quia quisquam quod recusandae rem soluta sunt tempore tenetur?

Examples #

Open #

Use the open attribute to have the details component expanded by default.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias blanditiis consectetur deserunt dignissimos eaque error eum hic incidunt ipsa, ipsum molestias, nihil nulla, numquam perferendis possimus quasi repellendus sapiente vero.

Placement #

Use the placement attribute to change the position of the chevron icon.

This details component has the chevron icon on the right. This details component has the chevron icon on the left.

Disabled #

Use the disabled attribute to disable the details component.

This details component is disabled and cannot be interacted with.

Locked #

Use the locked attribute to lock the details component in its current state, preventing it from being toggled.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, dicta dolor doloribus dolorum fugit illum laudantium magni, maiores officiis provident quam quia quisquam quod recusandae rem soluta sunt tempore tenetur?

Summary Slot #

Use the summary slot to provide custom HTML content for the summary of the details component.

John Doe
This details component uses a custom summary slot.

Actions Slot #

Use the actions slot to add action buttons to the summary of the details component.

Checkbox
This details component has actions in the summary.

Grouping #

Use the group attribute to group multiple details components together, allowing only one to be open at a time.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, doloribus ex illo labore magnam nesciunt nulla obcaecati odit porro sequi! Asperiores autem beatae debitis delectus ipsa maiores obcaecati sint suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aut corporis culpa cupiditate dicta eaque, et illum, inventore nam odit officiis omnis perspiciatis provident recusandae reiciendis repellendus reprehenderit tempore, vitae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid beatae consequatur cumque fugiat obcaecati, perferendis provident quis sed voluptates. A aperiam aspernatur cupiditate illo libero maxime officiis omnis quidem voluptate!

Custom Icons #

Use the chevron-icon slot to provide a custom icon for the details component.

This details component uses a custom icon.

Duration #

Use the duration attribute to set the animation duration for expanding and collapsing the details component.

This details component has a custom animation duration of 500ms.

Manual Control #

Use the show(), hide(), and toggle() methods to control the details component programmatically.

This details component can be controlled manually using the buttons below.
Toggle

Properties

Learn more about properties.

Name Description Reflects
open
Determines whether the details element is open or closed.
Type boolean
Default false
locked
Locks the details element in its current state. When true, the component cannot be toggled open or closed.
Type boolean
Default false
summary
Optional summary text to display in the header. If no value is provided, the slot content will be used.
Type string
duration
The duration of the expand/collapse animation in milliseconds.
Type number
Default 150
disabled
Disables interaction with the details component. When true, clicking on the summary will have no effect.
Type boolean
Default false
placement
Placement of the chevron icon. Determines whether the icon appears on the left or right side of the summary.
Type 'left' | 'right'
Default 'right'
group
An optional group identifier. When multiple `afp-details` elements share the same group name, opening one will automatically close the others — creating an accordion-like behavior.
Type string

Methods

Learn more about using methods.

Name Description Arguments
toggle
Toggles the open state of the details element. If it is currently open, it will close; otherwise, it will expand.
-
show
Expands the details section with animation. Automatically collapses other elements in the same group, if applicable.
-
hide
Collapses the details section with animation.
-

Events

Learn more about events.

Name Return Description
afp-show void
Emitted when the details section begins to expand.
afp-after-show void
Emitted after the details section has fully expanded.
afp-hide void
Emitted when the details section begins to collapse.
afp-after-hide void
Emitted after the details section has fully collapsed.

Slots

Learn more about slots.

Name Description
summary
The summary or header area that triggers expansion or collapse.
actions
Optional actions displayed next to the summary content.
chevron-icon
Optional slot to replace the default chevron icon.
default
The default slot for the collapsible content.

CSS Parts

Learn more about CSS Parts.

Name Description Selector
base
The root `<details>` element.
::part(base)
summary-wrapper
The clickable `<summary>` element.
::part(summary-wrapper)
summary
The container for the summary content.
::part(summary)
actions-wrapper
The container for action buttons or icons.
::part(actions-wrapper)
actions
The container for custom actions.
::part(actions)
chevron-icon
The chevron icon displayed by default.
::part(chevron-icon)
content
The collapsible content container.
::part(content)

CSS Custom Properties

Name Description Default
--afp-details-disabled-opacity
The opacity of the details component when disabled.
0.5

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

afp-icon

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/details/details.js';
Details
Share
Create a link with a predefined theme that is automatically applied when the generated link is opened. Default LBBW Presentation Mode
Abort Copy Link