Components

Details

<wa-details>

Since 2.0

Stable

Details show a brief summary and expand to show additional content.

Just want the styles? Check out the Details native styles!

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

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:

Some text a link more text 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>
  <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 automatically adapts to right-to-left languages:

استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن

<wa-details summary="تبديلني" lang="ar" dir="rtl">
  استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن
</wa-details>

Grouping Details Jump to heading

Details are designed to function independently, but you can simulate a group or "accordion" where only one is shown at a time by listening for the wa-show event.

<div class="details-group-example">
  <wa-details summary="First" 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 summary="Second">
    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="Third">
    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>

<script>
  const container = document.querySelector('.details-group-example');

  // Close all other details when one is shown
  container.addEventListener('wa-show', event => {
    if (event.target.localName === 'wa-details') {
      [...container.querySelectorAll('wa-details')].map(details => (details.open = event.target === details));
    }
  });
</script>

<style>
  .details-group-example wa-details:not(:last-of-type) {
    margin-bottom: var(--wa-space-2xs);
  }
</style>

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
`open` `open`	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 `boolean` Default `false`
`summary` `summary`	The summary to show in the header. If you need to display HTML, use the `summary` slot instead. Type `string`
`disabled` `disabled`	Disables the details so it can't be toggled. Type `boolean` Default `false`

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
`--icon-color`	The color of the details' icon.
`--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`

CSS parts Jump to heading

Learn more about CSS parts.

Name	Description
`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.
`header`	The header that wraps both the summary and the expand/collapse icon.
`summary`	The container that wraps the summary.
`icon`	The container that wraps the expand/collapse icons.
`content`	The details content.

Dependencies Jump to heading

This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.

<wa-icon>

Importing Jump to heading

The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN

npm

React

To manually import this component from the CDN, use the following code.

import 'https://early.webawesome.com/webawesome@3.0.0-alpha.9/dist/components/details/details.js';

Coming soon!

Getting Started

Resources

Themes

Components

Native Styles

Style Utilities

Layout

Color Palettes

Design Tokens

Details

Examples Jump to heading

Disabled Jump to heading

Customizing the Summary Icon Jump to heading

HTML in summary Jump to heading

Right-to-Left languages Jump to heading

Grouping Details Jump to heading

Slots Jump to heading

Attributes & Properties Jump to heading

Methods Jump to heading

Events Jump to heading

CSS custom properties Jump to heading

CSS parts Jump to heading

Dependencies Jump to heading

Importing Jump to heading

Getting Started

Resources

Details

Examples Jump to heading #

Disabled Jump to heading #

Customizing the Summary Icon Jump to heading #

HTML in summary Jump to heading #

Right-to-Left languages Jump to heading #

Grouping Details Jump to heading #

Slots Jump to heading #

Attributes & Properties Jump to heading #

Methods Jump to heading #

Events Jump to heading #

CSS custom properties Jump to heading #

CSS parts Jump to heading #

Dependencies Jump to heading #

Importing Jump to heading #

Examples Jump to heading

Disabled Jump to heading

Customizing the Summary Icon Jump to heading

HTML in summary Jump to heading

Right-to-Left languages Jump to heading

Grouping Details Jump to heading

Slots Jump to heading

Attributes & Properties Jump to heading

Methods Jump to heading

Events Jump to heading

CSS custom properties Jump to heading

CSS parts Jump to heading

Dependencies Jump to heading

Importing Jump to heading