Details

<cs-details>

Stable

Since 0.1

Details display a brief summary and expand to reveal additional content. Use them to progressively disclose information, group related FAQs, or hide advanced options.

  Click the summary to expand and collapse the details component. You can put any content in here that you want to
  reveal on demand!

<cs-details summary="Toggle Me">
  Click the summary to expand and collapse the details component. You can put any content in here that you want to
  reveal on demand!
</cs-details>

Examples

Expanded Initially

Use the open attribute to expand the details initially.

  This details component is expanded by default. Users can click the summary to collapse it if they want to hide the
  content.

<cs-details summary="Toggle Me" open>
  This details component is expanded by default. Users can click the summary to collapse it if they want to hide the
  content.
</cs-details>

Disabled

Use the disabled attribute to prevent the details from expanding.

  This content can't be seen because the details component is disabled. Try removing the disabled attribute to reveal
  what's inside!

<cs-details summary="Disabled" disabled>
  This content can't be seen because the details component is disabled. Try removing the disabled attribute to reveal
  what's inside!
</cs-details>

Expand & Collapse Icons

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.

  
  This example uses custom plus and minus icons for expanding and collapsing. You can use any icon you want to match the
  look and feel of your app.

<cs-details summary="Toggle Me" class="custom-icons">
  <cs-icon name="add_box" slot="expand-icon"></cs-icon>
  <cs-icon name="indeterminate_check_box" slot="collapse-icon"></cs-icon>

  This example uses custom plus and minus icons for expanding and collapsing. You can use any icon you want to match the
  look and feel of your app.
</cs-details>

<style>
  /* Disable the expand/collapse animation */
  cs-details.custom-icons::part(icon) {
    rotate: none;
  }
</style>

Icon Placement

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.

  
    The expand/collapse icon is at the start of the summary. This is a common pattern that feels familiar to users who
    are used to tree views and file explorers.
  
    The expand/collapse icon is at the end of the summary. This is the default placement and works great for most use
    cases.

<div class="cs-stack">
  <cs-details summary="Start" icon-placement="start">
    The expand/collapse icon is at the start of the summary. This is a common pattern that feels familiar to users who
    are used to tree views and file explorers.
  </cs-details>
  <cs-details summary="End" icon-placement="end">
    The expand/collapse icon is at the end of the summary. This is the default placement and works great for most use
    cases.
  </cs-details>
</div>

HTML in Summary

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 You can use the summary slot to put HTML in the summary, including links and other interactive elements. Pretty neat, right?

<cs-details>
  <span slot="summary">
    Some text
    <a href="https://github.com/CruGlobal/cornerstone-design-system" target="_blank">a link</a>
    more text
  </span>

  You can use the summary slot to put HTML in the summary, including links and other interactive elements. Pretty neat,
  right?
</cs-details>

Right-to-Left Languages

The details component, including its icon-placement, automatically adapts to right-to-left languages:

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

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

Appearance

Use the appearance attribute to change the element’s visual appearance.

  
    This is the default outlined appearance. It has a subtle border that helps it stand out without being too flashy.
  
    The filled-outlined appearance combines a filled header with an outlined body. It gives the summary a bit more
    visual weight while keeping the content area clean.
  
    The filled appearance adds a background color to the entire component. Use this when you want the details to really
    pop on the page.
  
    No bells and whistles on this one. The plain appearance strips away borders and backgrounds for a minimalist look.

<div class="cs-stack">
  <cs-details summary="Outlined (default)">
    This is the default outlined appearance. It has a subtle border that helps it stand out without being too flashy.
  </cs-details>
  <cs-details summary="Filled-outlined" appearance="filled-outlined">
    The filled-outlined appearance combines a filled header with an outlined body. It gives the summary a bit more
    visual weight while keeping the content area clean.
  </cs-details>
  <cs-details summary="Filled" appearance="filled">
    The filled appearance adds a background color to the entire component. Use this when you want the details to really
    pop on the page.
  </cs-details>
  <cs-details summary="Plain" appearance="plain">
    No bells and whistles on this one. The plain appearance strips away borders and backgrounds for a minimalist look.
  </cs-details>
</div>

Grouping Details

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.

  
    This is the first section of the accordion. When you open another section, this one will close automatically. Give
    it a try!
  
    This is the second section. Notice how the first section closed when you opened this one? That's the accordion
    behavior in action, powered by the shared name attribute.
  
    And here's the third section. You can have as many sections as you need — just make sure they all share the same
    name and only one will be open at a time.

<div class="cs-stack">
  <cs-details name="group-1" summary="Section 1" open>
    This is the first section of the accordion. When you open another section, this one will close automatically. Give
    it a try!
  </cs-details>

  <cs-details name="group-1" summary="Section 2">
    This is the second section. Notice how the first section closed when you opened this one? That's the accordion
    behavior in action, powered by the shared name attribute.
  </cs-details>

  <cs-details name="group-1" summary="Section 3">
    And here's the third section. You can have as many sections as you need — just make sure they all share the same
    name and only one will be open at a time.
  </cs-details>
</div>

API

Importing

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick this component, use one of the following snippets.

npm

Self-Hosted

React

import '@cruglobal/cornerstone-components/components/details/details.js';

import './cornerstone/components/details/details.js';

import CsDetails from '@cruglobal/cornerstone-components/react/details/index.js';

Slots

Learn more about using slots.

Name	Description
(default)	The details' main content.
`collapse-icon`	Optional collapse icon to use instead of the default. Works best with `<cs-icon>`.
`expand-icon`	Optional expand icon to use instead of the default. Works best with `<cs-icon>`.
`summary`	The details' summary. Alternatively, you can use the `summary` attribute.

Attributes & Properties

Learn more about attributes and properties.

Property	Attribute	Description	Type	Default	Reflects
`appearance`	`appearance`	The element's visual appearance.	`'filled' \| 'outlined' \| 'filled-outlined' \| 'plain'`	`'outlined'`	Yes
`disabled`	`disabled`	Disables the details so it can't be toggled.	`boolean`	`false`	Yes
`iconPlacement`	`icon-placement`	The location of the expand/collapse icon.	`'start' \| 'end'`	`'end'`	Yes
`name`	`name`	Groups related details elements. When one opens, others with the same name will close.	`string`	—	Yes
`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.	`boolean`	`false`	Yes
`summary`	`summary`	The summary to show in the header. If you need to display HTML, use the `summary` slot instead.	`string`	—	—

Methods

Learn more about methods.

Name	Description	Arguments
`hide()`	Hides the details	—
`show()`	Shows the details.	—

Events

Learn more about events.

Name	Description
`cs-after-hide`	Emitted after the details closes and all animations are complete.
`cs-after-show`	Emitted after the details opens and all animations are complete.
`cs-hide`	Emitted when the details closes.
`cs-show`	Emitted when the details opens.

CSS Custom Properties

Learn more about CSS custom properties.

Name	Description	Default
`--hide-duration`	The hide duration to use when applying built-in animation classes.	`var(--cs-transition-normal)`
`--show-duration`	The show duration to use when applying built-in animation classes.	`var(--cs-transition-normal)`
`--spacing`	The amount of space around and between the details' content. Expects a single value.	—

Custom States

Learn more about custom states.

Name	Description	CSS selector
`animating`	Applied when the details is animating expand/collapse.	`:state(animating)`

CSS Parts

Learn more about CSS parts.

Name	Description	CSS selector
`content`	The details content.	`::part(content)`
`details`	The component's outer wrapper. 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(details)`
`header`	The header that wraps both the summary and the expand/collapse icon.	`::part(header)`
`icon`	The container that wraps the expand/collapse icons.	`::part(icon)`
`summary`	The container that wraps the summary.	`::part(summary)`

Dependencies

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

<cs-icon>

Quick Links

Recent Searches