Preview

Usage

<!-- Collapsed by default -->
<cs-expandable-section header-text="Additional information">
  Hidden content here.
</cs-expandable-section>

<!-- Starts expanded -->
<cs-expandable-section header-text="Details" expanded>
  Visible content here.
</cs-expandable-section>

Properties

analytics-metadataExpandableSectionProps.AnalyticsMetadata

Specifies additional analytics-related metadata.

• instanceIdentifier - A unique string that identifies this component instance in your application.

default-expandedboolean default: false

Determines whether the component initially displays in expanded state (that is, with content visible). The component operates in an uncontrolled manner even if you provide a value for this property.

disable-content-paddingsboolean default: false

Determines whether the content section's default padding is removed. This default padding is only present for the container variant.

expandedboolean

Determines whether the component is in the expanded state (that is, with content visible). The component operates in a controlled manner if you provide a value for this property.

header-aria-labelstring

Adds aria-label to the header element. Use to assign unique labels when there are multiple expandable sections with the same header text on one page.

header-counterstring default: ''

Specifies secondary text that's displayed to the right of the heading title. Use with the container variant. Behaves similar to the Header component counter.

header-descriptionstring default: ''

Supplementary text below the heading. Use with the container, default or footer variants.

heading-tag-overrideExpandableSectionProps.HeadingTag

Overrides the default HTML heading tag. Use with the container variant (which defaults to H2) or default/footer variants (which default to DIV). Using this property does not change the visual appearance of the component. Note that this only works with the headerText slot (not with the deprecated header), and not with the navigation variant.

variantExpandableSectionProps.Variant default: 'default'

The possible variants of an expandable section are as follows:

• default - Use this variant in any context.
• footer - Use this variant in container footers.
• container - Use this variant in a detail page alongside other containers.
• navigation - Use this variant in the navigation panel with anchors and custom styled content. It doesn't have any default styles.
• stacked - Use this variant directly adjacent to other stacked containers (such as a container, table).
• inline - Use this variant in any context where you need reduced padding around the header.

Slots

default

Primary content displayed in the expandable section element.

header

headerActions

Actions for the header. Use with the default or container variant.

headerInfo

The area next to the heading, used to display an Info link. Use with the container variant.

headerText

The heading text. Use plain text. When using the container variant, you can use additional header props like headerDescription and headerCounter to display other elements in the header.

Events

changeCustomEvent<ExpandableSectionProps.ChangeDetail>

Called when the state changes (that is, when the user expands or collapses the component). The event detail contains the current value of the expanded property.