Accordion

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

Alternative Expanded Indicators

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

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

// Reactive icon states for each accordion item
const items = ref([
{ heading: 'Accordion item 1', expanded: true, icon: 'minus-line' },
{ heading: 'Accordion item 2', expanded: false, icon: 'plus-line' },
]);

// Toggle icon and expanded state on change
const handleChange = (index: number) => {
const item = items.value[index];
item.expanded = !item.expanded;
item.icon = item.expanded ? 'minus-line' : 'plus-line';
};

</script>

<template>
  <VAccordion expand-mode="multi">
    <VAccordionItem v-for="(item, index) in items" :key="index" class="accordion-item" icon-trailing :heading="item.heading" :expanded="item.expanded" @change="handleChange(index)">
      <template #icon><VIcon :name="item.icon" /></template>
      This is the accordion body.
    </VAccordionItem>
  </VAccordion>
</template>

<vwc-accordion expand-mode="multi">
  <vwc-accordion-item class="accordion-item" icon-trailing heading="Accordion item 1" expanded><vwc-icon slot="icon" name="minus-line"></vwc-icon> This is the accordion body. </vwc-accordion-item>
  <vwc-accordion-item class="accordion-item" icon-trailing heading="Accordion item 2"><vwc-icon slot="icon" name="plus-line"></vwc-icon> This is the accordion body. </vwc-accordion-item>
</vwc-accordion>

<script>
  document.querySelectorAll('.accordion-item').forEach((item) => {
    item.addEventListener('change', (e) => {
      if (e.target !== item) {
        return;
      }
      const icon = item.querySelector('[slot="icon"]');
      if (!icon) {
        return;
      }
      icon.setAttribute('name', icon.getAttribute('name') === 'minus-line' ? 'plus-line' : '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.

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

<template>
  <VActionGroup class="action-group">
    <VAccordionItem class="accordion-item" heading="Expandable Section"> This is the content for the expandable section. </VAccordionItem>
  </VActionGroup>
</template>

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

<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>