Accordion

Accordion and Accordion Item work together to provide a vertically stacked list of headers that reveal or hide associated sections of content.

import { registerAccordion } from '@vonage/vivid';
import { registerAccordionItem } from '@vonage/vivid';

registerAccordion('your-prefix');
registerAccordionItem('your-prefix');

<script setup lang="ts">
	import { VAccordion } from '@vonage/vivid-vue';
	import { VAccordionItem } from '@vonage/vivid-vue';
</script>

<template>
	<VTextAccordion>
		<VTextAccordionItem heading="Accordion item 1">
			This is the first item's accordion body.
		</VTextAccordionItem>
		<VTextAccordionItem heading="Accordion item 2">
			This is the second item's accordion body.
		</VTextAccordionItem>
	</VTextAccordion>
</template>

Use the heading-level to set level of the Accordion Item's headline element to ensure accessible heading levels.

Use the closeAll method on Accordion to programatically close all open Accordion Item's.

Use the heading slot to add custom content to the Accordion Item's heading, allowing you to apply custom formatting. If set, the heading attribute is ignored.

Set the meta slot to add additional content to the accordion item's heading. If set, the meta attribute is ignored.

Use the --accordion-item-meta-inline-size to control the width of the meta-data slot content.

• Default: 20%

Properties

Methods

Properties

Slots

Events