Accordion

Accordion is an interactive element that works alongside Accordion Item to organise and display content in a collapsible and expandable way.

Heading

Use the heading attribute on Accordion Item to set the heading text.

To ensure accessible heading levels use the heading-level attribute.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-accordion>
	<vwc-accordion-item heading="Accordion item 1">
		This is the first item's accordion body.
	</vwc-accordion-item>
	<vwc-accordion-item heading="Accordion item 2">
		This is the second item's accordion body.
	</vwc-accordion-item>
</vwc-accordion>

Expand Mode

Use the expand-mode attribute on Accordion to determine if multiple items can opened at once or single (default).

Single

In single mode only one Accordion Item can be expanded at a time. By default, the first Accordion Item will be expanded when the component is initialized.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-accordion expand-mode="single">
	<vwc-accordion-item heading="Accordion item 1">
		This is the first item's accordion body.
	</vwc-accordion-item>
	<vwc-accordion-item heading="Accordion item 2">
		This is the second item's accordion body.
	</vwc-accordion-item>
	<vwc-accordion-item heading="Accordion item 3">
		This is the third item's accordion body.
	</vwc-accordion-item>
</vwc-accordion>

Multi

In multi mode multiple Accordion Items can be expanded.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-accordion expand-mode="multi">
	<vwc-accordion-item heading="Accordion item 1" expanded>
		This is the first item's accordion body.
	</vwc-accordion-item>
	<vwc-accordion-item heading="Accordion item 2" expanded>
		This is the second item's accordion body.
	</vwc-accordion-item>
	<vwc-accordion-item heading="Accordion item 3">
		This is the third item's accordion body.
	</vwc-accordion-item>
</vwc-accordion>

Expanded

Use the expanded attribute on Accordion Item to set it's open state.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-accordion expand-mode="multi">
	<vwc-accordion-item heading="Accordion item 1">
		This is the first item's accordion body.
	</vwc-accordion-item>
	<vwc-accordion-item
		expanded
		heading="Accordion item 2 with expanded attribute"
	>
		This is the second item's accordion body.
	</vwc-accordion-item>
</vwc-accordion>

Icon

The icon attribute displays an icon from the icon library, which prefixes the Accordion Item's heading.

The preferred way to add icons is to use the icon slot.

The icon prop is deprecated (as of 05/25) and directly replaced with icon slot. icon is still functional in the component but will be removed in a future major release. This will be communicated when it's removal becomes a release candidate at the end of the support period.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-accordion>
	<vwc-accordion-item icon="accessibility-line" heading="Accordion item 1">
		This is the first item's accordion body.
	</vwc-accordion-item>
	<vwc-accordion-item icon="ai-line" heading="Accordion item 2">
		This is the second item's accordion body.
	</vwc-accordion-item>
</vwc-accordion>

Icon Trailing

Use the icon-trailing attribute to postfix the icon in place of the Accordion Item's chevron.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-accordion expand-mode="multi">
	<vwc-accordion-item
		class="accordion-item"
		icon-trailing
		heading="Accordion item 1"
		expanded
	>
		<vwc-icon slot="icon" name="minus-line"></vwc-icon>
		This is the first item's accordion body.
	</vwc-accordion-item>
	<vwc-accordion-item
		class="accordion-item"
		icon-trailing
		icon="plus-line"
		heading="Accordion item 2"
	>
		This is the second item's accordion body.
	</vwc-accordion-item>
</vwc-accordion>

<script>
	document.querySelectorAll('.accordion-item').forEach((item) => {
		item.addEventListener('change', (e) => {
			if (e.target !== item) {
				return;
			}
			const iconName = item.getAttribute('icon');
			iconName === 'minus-line'
				? item.setAttribute('icon', 'plus-line')
				: item.setAttribute('icon', 'minus-line');
		});
	});
</script>

Size

Use the size attribute to control the size of the Accordion Item.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<div class="container">
	<div class="example">
		<b>Normal</b>
		<vwc-accordion class="accordion" expand-mode="multiple">
			<vwc-accordion-item size="normal" heading="Accordion item 1">
				This is the first item's accordion body.
			</vwc-accordion-item>
			<vwc-accordion-item size="normal" heading="Accordion item 2">
				This is the second item's accordion body.
			</vwc-accordion-item>
		</vwc-accordion>
	</div>
	<div class="example">
		<b>Condensed</b>
		<vwc-accordion class="accordion" expand-mode="multiple">
			<vwc-accordion-item size="condensed" heading="Accordion item 1">
				This is the first item's accordion body.
			</vwc-accordion-item>
			<vwc-accordion-item size="condensed" heading="Accordion item 2">
				This is the second item's accordion body.
			</vwc-accordion-item>
		</vwc-accordion>
	</div>
</div>

<style>
	.container {
		display: flex;
		flex-direction: column;
		gap: 48px;
		inline-size: 100%;
	}
	.example {
		flex-grow: 1;
		inline-size: 100%;
	}
	.accordion {
		margin-top: 16px;
		display: block;
	}
</style>

No Indicator

Use the no-indicator attribute on Accordion Item to remove indicator icon from the heading element.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-accordion>
	<vwc-accordion-item no-indicator heading="Accordion item 1">
		This is the first item's accordion body.
	</vwc-accordion-item>
	<vwc-accordion-item no-indicator heading="Accordion item 2">
		This is the second item's accordion body.
	</vwc-accordion-item>
</vwc-accordion>