## Examples

### Basic


import ExpandableSectionBasic from "./ExpandableSectionBasic.tsx?raw"

<LiveExample src={ExpandableSectionBasic} />

### Uncontrolled


import ExpandableSectionUncontrolled from "./ExpandableSectionUncontrolled.tsx?raw"

<LiveExample src={ExpandableSectionUncontrolled} />

### Uncontrolled with dynamic toggle text


import ExpandableSectionUncontrolledDynamicToggleText from "./ExpandableSectionUncontrolledDynamicToggleText.tsx?raw"

<LiveExample src={ExpandableSectionUncontrolledDynamicToggleText} />

### Detached

When passing the `isDetached` property into `<ExpandableSection>`, you must also manually pass in the same `toggleId` and `contentId` properties to both `<ExpandableSection>` and `<ExpandableSectionToggle>`. This will link the content to the toggle via ARIA attributes.

By default animations will not be enabled for a detached `<ExpandableSection>`. You must manually pass the `direction` property with an appropriate value based on where the expandable content is rendered. If the expandable content is above the expandable toggle, `direction="up"` must be passed like in this example.


import ExpandableSectionDetached from "./ExpandableSectionDetached.tsx?raw"

<LiveExample src={ExpandableSectionDetached} />

### Disclosure variation

You can pass in the `displaySize="lg"` property for a disclosure variation styling.


import ExpandableSectionDisclosure from "./ExpandableSectionDisclosure.tsx?raw"

<LiveExample src={ExpandableSectionDisclosure} />

### Indented expandable content

You can indent the expandable content by passing in the `isIndented` property. This will not affect the expandable toggle.


import ExpandableSectionIndented from "./ExpandableSectionIndented.tsx?raw"

<LiveExample src={ExpandableSectionIndented} />

### With custom toggle content

By using the `toggleContent` prop, you can pass in content other than a simple string such as an icon or a badge. When passing in custom content in this way, you should not pass in any interactive element such as a button.


import ExpandableSectionCustomToggle from "./ExpandableSectionCustomToggle.tsx?raw"

<LiveExample src={ExpandableSectionCustomToggle} />

### Truncate expansion

By passing in `variant="truncate"`, the expandable content will be visible up to a maximum number of lines before being truncated, with the toggle revealing or hiding the truncated content. By default the expandable content will truncate after 3 lines, and this can be customized by also passing in the `truncateMaxLines` prop.


import ExpandableSectionTruncateExpansion from "./ExpandableSectionTruncateExpansion.tsx?raw"

<LiveExample src={ExpandableSectionTruncateExpansion} />