Expansion Panels

Each panel has its own trigger and region; a coordinated group is an accordion. Intrinsic-height animation supports dynamic content; reduced motion removes only the transition.

Default

<div class="expansion-panel-container">
	<div class="expansion-panel is-open">
		<button
			id="panel-header-1"
			class="expansion-panel-header"
			type="button"
			aria-expanded="true"
			aria-controls="panel-content-1">
			Expansion Panel Header 1
		</button>
		<div
			id="panel-content-1"
			class="expansion-panel-content"
			role="region"
			aria-labelledby="panel-header-1">
			<div class="expansion-panel-inner">Content</div>
		</div>
	</div>
	<div class="expansion-panel">
		<button
			id="panel-header-2"
			class="expansion-panel-header"
			type="button"
			aria-expanded="false"
			aria-controls="panel-content-2">
			Expansion Panel Header 2
		</button>
		<div
			id="panel-content-2"
			class="expansion-panel-content"
			role="region"
			aria-labelledby="panel-header-2"
			hidden>
			<div class="expansion-panel-inner">Content</div>
		</div>
	</div>
	<div class="expansion-panel">
		<button
			id="panel-header-3"
			class="expansion-panel-header"
			type="button"
			aria-expanded="false"
			aria-controls="panel-content-3">
			Expansion Panel Header 3
		</button>
		<div
			id="panel-content-3"
			class="expansion-panel-content"
			role="region"
			aria-labelledby="panel-header-3"
			hidden>
			<div class="expansion-panel-inner">Content</div>
		</div>
	</div>
</div>

CSS Variables

Override these variables on the component or an ancestor.

--expansion-panel-header-padding-y: var(--spacer-3);
--expansion-panel-header-padding-x: var(--spacer-3);
--expansion-panel-header-icon-space: var(--spacer-5);
--expansion-panel-inner-padding: var(--spacer-3);
--expansion-panel-bg-color: var(--bg-surface);
--expansion-panel-header-bg-color: var(--bg-surface);
--expansion-panel-content-bg-color: var(--bg-surface);
--expansion-panel-header-hover-color: var(--action-color);
--expansion-panel-header-active-color: var(--action-color-active);
--expansion-panel-border-width: var(--border-width);
--expansion-panel-border-color: var(--border-color);
--expansion-panel-border-radius: var(--border-radius);
--expansion-panel-icon-size: 2rem;
--expansion-panel-icon-inline-end: var(--spacer-2);
--expansion-panel-icon-closed: '+';
--expansion-panel-icon-open: '−';
--expansion-panel-focus-outline-width: var(--focus-outline-width);
--expansion-panel-focus-outline-style: var(--focus-outline-style);
--expansion-panel-focus-outline-color: var(--focus-outline-color);
--expansion-panel-focus-outline-offset: var(--focus-offset);
--expansion-panel-transition-duration: var(--transition-duration);
--expansion-panel-transition-easing: var(--transition-easing);
--expansion-panel-content-transition-duration: var(--transition-duration);