Accordion

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

import '@vonage/vivid/accordion';
import '@vonage/vivid/accordion-item';

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