- React
- HTML

## Examples

### Hidden

### Expanded

### Indented

### Disclosure variation (hidden)

### Disclosure variation (expanded)

### Disclosure variation (indented)

### Detached

### Truncate expansion (hidden)

### Truncate expansion (expanded)

## Documentation

### Accessibility

Attribute | Applied to | Outcome
--- | --- | ---
`aria-expanded="true"` | `.pf-v6-c-expandable-section__toggle .pf-v6-c-button` | Indicates that the expandable section content is visible. Required
`aria-expanded="false"` | `.pf-v6-c-expandable-section__toggle .pf-v6-c-button` | Indicates the the expandable section content is hidden. Required
`hidden` | `.pf-v6-c-expandable-section__content` | Indicates that the expandable section content element is hidden. Use with `aria-expanded="false"` Required
`aria-hidden="true"` | `.pf-v6-c-expandable-section__toggle-icon` | Hides the icon from screen readers. Required
`aria-controls="[id of content element]"` | `.pf-v6-c-expandable-section.pf-m-detached .pf-v6-c-expandable-section__toggle .pf-v6-c-button` | Identifies the element controlled by the toggle button. Required
`id` | `.pf-v6-c-expandable-section.pf-m-detached .pf-v6-c-expandable-section__content` | Gives the content an `id` for use with `aria-controls` on `.pf-v6-c-expandable-section__toggle .pf-v6-c-button`. Required

### Usage

Class | Applied to | Outcome
--- | --- | ---
`.pf-v6-c-expandable-section` | `<div>` | Initiates the expandable section component. Required
`.pf-v6-c-expandable-section__toggle` | `<div>` | Initiates the expandable toggle wrapper. Required
`.pf-v6-c-expandable-section__toggle-icon` | `<span>` | Initiates the expandable toggle icon. Required
`.pf-v6-c-expandable-section__content` | `<div>` | Initiates the expandable section content. Required
`.pf-m-expanded` | `.pf-v6-c-expandable-section` | Modifies the component for the expanded state.
`.pf-m-display-lg` | `.pf-v6-c-expandable-section` | Modifies the styling of the component to have large display styling.
`.pf-m-indented` | `.pf-v6-c-expandable-section` | Indicates that the expandable section content is indented and is aligned with the start of the title text to provide visual hierarchy.
`.pf-m-truncate` | `.pf-v6-c-expandable-section` | Indicates that the expandable section content is truncated by default, and not truncated when expanded.
`.pf-m-expand-top` | `.pf-v6-c-expandable-section__toggle-icon` | Modifies the toggle icon to point up when expanded.
`--pf-v6-c-expandable-section--m-truncate__content--LineClamp` | `.pf-v6-c-expandable-section.pf-m-truncate` | Modifies the number of lines to show before truncating.

##
CSS variables