Vue accordion component is a list of headers that hide or reveal additional content when selected/opened. that contains the AccordionGroup as the wrapper of the accordion, AccordionHeader as the header of each panel and the AccordionPanel for the panels that has two states of collapsed and expanded.

Import and register the AccordionGroup, AccordionHeader, AccordionPanel component make sure that the AccordionHeader and AccordionPanel are wrapped by AccordionGroup like you see below but it doesn't need to be direct descendents:

import {
	AccordionGroup,
	AccordionHeader,
	AccordionPanel,
} from '~/citi-baseline/components/Accordion/';

export default {
	name: 'ExampleComponent',
	components: { AccordionGroup, AccordionHeader, AccordionPanel },
};

<!-- As written in Vue -->
<AccordionGroup>
	<template v-for="(item, index) in items">
		<AccordionHeader
			:id="`${item.key}`"
			:aria-controls="`panel-${index}`"
			:key="`header-${index}`"
		>
			{{ item.headerContentHere }}
		</AccordionHeader>

		<AccordionPanel :id="panel-`${index}`" :key="`panel-${index}`">
			{{ item.panelContentHere }}
		</AccordionPanel>
	</template>
</AccordionGroup>

The default slot on AccordionGroup exposes the following properties: { hasFocus: Boolean, openAll: Function, closeAll: Function } so we can check if the element has focus on and by openAll and closeAll we can set a button to open or close all the panels