Vivid Logo Vivid

Accordion

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

Alternative Expanded Indicators

The example below uses the icon and icon-trailing attributes to replace the chevron indicators with plus and minus icons.

<!-- 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
		icon="minus-line"
		heading="Accordion item 1"
		expanded
	>
		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>

Single Accordion Items

The example below shows how a single Accordion Item can be used inside an Action Group component (which provides the border) to create a stand alone expandable section of content.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-action-group class="action-group">
	<vwc-accordion-item class="accordion-item" heading="Expandable Section">
		This is the content for the expandable section.
	</vwc-accordion-item>
</vwc-action-group>

<style>
	.action-group,
	.accordion-item {
		display: block;
		inline-size: 100%;
	}
</style>