Accordion

An accordion set is a vertical list of headers that reveal or hide associated sections of content. Accordion item is a header title, which gives the user a high level overview of the content, allowing the user to decide which sections to choose.

The vwc-accordion accepts vwc-accordion-item elements as children.

<script type="module">import '@vonage/vivid/accordion';</script>

<!-- 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-item heading="Accordion item 3">
		This is the third item's accordion body.
	</vwc-accordion-item>
	<vwc-accordion-item heading="Accordion item 4">
		This is the fourth item's accordion body.
	</vwc-accordion-item>
</vwc-accordion>

Members

Expand-mode

Use the expand-mode attribute to control the expand mode of the accordion, either allowing single or multiple item expansion.

Type: 'multi' | 'single'
Default: 'single'

<!-- 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">
		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-item heading="Accordion item 4">
		This is the fourth item's accordion body.
	</vwc-accordion-item>
</vwc-accordion>

Methods

Name	Returns	Description
`closeAll`	`void`	When `expand-mode` is set to `multi`, closes all the accordion items from the open state.