Details
<wa-details>
Details show a brief summary and expand to show additional content.
<wa-details summary="Toggle Me"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </wa-details>
Examples
Jump to heading
Disabled
Jump to heading
Use the disabled attribute to prevent the details from expanding.
<wa-details summary="Disabled" disabled> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </wa-details>
Customizing the Summary Icon
Jump to heading
Use the expand-icon and collapse-icon slots to change the expand and collapse icons, respectively. To disable the animation, override the rotate property on the icon part as shown below.
<wa-details summary="Toggle Me" class="custom-icons"> <wa-icon name="square-plus" slot="expand-icon" variant="regular"></wa-icon> <wa-icon name="square-minus" slot="collapse-icon" variant="regular"></wa-icon> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </wa-details> <style> /* Disable the expand/collapse animation */ wa-details.custom-icons::part(icon) { rotate: none; } </style>
Icon Position
Jump to heading
The default position for the expand and collapse icons is at the end of the summary. Set the icon-placement attribute to start to place the icon at the start of the summary.
<div class="wa-stack"> <wa-details summary="Start" icon-placement="start"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </wa-details> <wa-details summary="End" icon-placement="end"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </wa-details> </div>
HTML in Summary
Jump to heading
To use HTML in the summary, use the summary slot.
Links and other interactive elements will still retain their behavior:
<wa-details> <span slot="summary"> Some text <a href="https://webawesome.com" target="_blank">a link</a> more text </span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </wa-details>
Right-to-Left Languages
Jump to heading
The details component, including its icon-placement, automatically adapts to right-to-left languages:
<div class="wa-stack"> <wa-details summary="تبديلني" lang="ar" dir="rtl"> استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن </wa-details> <wa-details summary="تبديلني" lang="ar" dir="rtl" icon-placement="start"> استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن </wa-details> </div>
Appearance
Jump to heading
Use the appearance attribute to change the element’s visual appearance.
<div class="wa-stack"> <wa-details summary="Outlined (default)"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </wa-details> <wa-details summary="Filled-outlined" appearance="filled-outlined"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </wa-details> <wa-details summary="Filled" appearance="filled"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </wa-details> <wa-details summary="Plain" appearance="plain"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </wa-details> </div>
Grouping Details
Jump to heading
Use the name attribute to create accordion-like behavior where only one details element with the same name can be open at a time. This matches the behavior of native <details> elements.
<div class="wa-stack"> <wa-details name="group-1" summary="Section 1" open> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </wa-details> <wa-details name="group-1" summary="Section 2"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </wa-details> <wa-details name="group-1" summary="Section 3"> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident. </wa-details> </div>
Slots
Jump to heading
Learn more about using slots.
| Name | Description |
|---|---|
| (default) | The details' main content. |
summary
|
The details' summary. Alternatively, you can use the summary attribute. |
expand-icon
|
Optional expand icon to use instead of the default. Works best with <wa-icon>. |
collapse-icon
|
Optional collapse icon to use instead of the default. Works best with <wa-icon>. |
Attributes & Properties
Jump to heading
Learn more about attributes and properties.
| Name | Description | Reflects | |
|---|---|---|---|
openopen |
Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you
can use the
show() and hide() methods and this attribute will reflect the details' open state.Type
booleanDefault
false |
|
|
summarysummary |
The summary to show in the header. If you need to display HTML, use the
summary slot instead.Type
string |
||
namename |
Groups related details elements. When one opens, others with the same name will close.
Type
string |
|
|
disableddisabled |
Disables the details so it can't be toggled.
Type
booleanDefault
false |
|
|
appearanceappearance |
The element's visual appearance.
Type
'filled' | 'outlined' | 'filled-outlined' | 'plain'Default
'outlined' |
|
|
iconPlacementicon-placement |
The location of the expand/collapse icon.
Type
'start' | 'end'Default
'end' |
|
Methods
Jump to heading
Learn more about methods.
| Name | Description | Arguments |
|---|---|---|
show() |
Shows the details. | |
hide() |
Hides the details |
Events
Jump to heading
Learn more about events.
| Name | Description |
|---|---|
wa-show |
Emitted when the details opens. |
wa-after-show |
Emitted after the details opens and all animations are complete. |
wa-hide |
Emitted when the details closes. |
wa-after-hide |
Emitted after the details closes and all animations are complete. |
CSS custom properties
Jump to heading
Learn more about CSS custom properties.
| Name | Description |
|---|---|
--spacing |
The amount of space around and between the details' content. Expects a single value.
|
--show-duration |
The show duration to use when applying built-in animation classes.
Default
200ms
|
--hide-duration |
The hide duration to use when applying built-in animation classes.
Default
200ms
|
Custom States
Jump to heading
Learn more about custom states.
| Name | Description | CSS selector |
|---|---|---|
animating |
Applied when the details is animating expand/collapse. |
:state(animating)
|
CSS parts
Jump to heading
Learn more about CSS parts.
| Name | Description | CSS selector |
|---|---|---|
base |
The inner <details> element used to render the component. Styles you apply to the component are automatically applied to this part, so you usually don't need to deal with it unless you need to set the display property. |
::part(base)
|
header |
The header that wraps both the summary and the expand/collapse icon. |
::part(header)
|
summary |
The container that wraps the summary. |
::part(summary)
|
icon |
The container that wraps the expand/collapse icons. |
::part(icon)
|
content |
The details content. |
::part(content)
|
Dependencies
Jump to heading
This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.
Importing
Jump to heading
Autoloading components via projects is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
Let your project code do the work! Sign up for free to use a project with your very own CDN — it's the fastest and easiest way to use Web Awesome.
To manually import this component from NPM, use the following code.
import '@awesome.me/webawesome/dist/components/details/details.js';
To manually import this component from React, use the following code.
import WaDetails from '@awesome.me/webawesome/dist/react/details';
Need a hand?