Accordion

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

Heading

Use the heading attribute on Accordion Item to set the heading text.

To ensure accessible heading levels use the heading-level attribute.

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

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

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

Expand Mode

Use the expand-mode attribute on Accordion to determine if multiple items can opened at once or single (default).

Single

In single mode only one Accordion Item can be expanded at a time. By default, the first Accordion Item will be expanded when the component is initialized.

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

<template>
  <VAccordion expand-mode="single">
    <VAccordionItem heading="Accordion item 1"> This is the first item's accordion body. </VAccordionItem>

      <VAccordionItem heading="Accordion item 2"> This is the second item's accordion body. </VAccordionItem>

      <VAccordionItem heading="Accordion item 3"> This is the third item's accordion body. </VAccordionItem>
    </VAccordion>

</template>

<vwc-accordion expand-mode="single">
  <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>

Multi

In multi mode multiple Accordion Items can be expanded.

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

<template>
  <VAccordion expand-mode="multi">
    <VAccordionItem heading="Accordion item 1"> This is the first item's accordion body. </VAccordionItem>

      <VAccordionItem heading="Accordion item 2"> This is the second item's accordion body. </VAccordionItem>

      <VAccordionItem heading="Accordion item 3"> This is the third item's accordion body. </VAccordionItem>
    </VAccordion>

</template>

<vwc-accordion expand-mode="multi">
  <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>

Expanded

Use the expanded attribute on Accordion Item to set it’s open state.

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

<template>
  <VAccordion expand-mode="multi">
    <VAccordionItem heading="Accordion item 1"> This is the first item's accordion body. </VAccordionItem>
    <VAccordionItem expanded heading="Accordion item 2 with expanded attribute"> This is the second item's accordion body. </VAccordionItem>
  </VAccordion>
</template>

<vwc-accordion expand-mode="multi">
  <vwc-accordion-item heading="Accordion item 1"> This is the first item's accordion body. </vwc-accordion-item>
  <vwc-accordion-item expanded heading="Accordion item 2 with expanded attribute">
    {' '}
    This is the second item's accordion body.{' '}
  </vwc-accordion-item>
</vwc-accordion>

Appearance

Use the appearance attribute to change the Accordion Item appearance.

Choose from ghost (default), ghost-light (as ghost but with transparency on the hover color) and filled.

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

<template>
  <VAccordion expand-mode="multi">
    <VAccordionItem heading="Ghost (default)"> This is the first item's accordion body. </VAccordionItem>

      <VAccordionItem appearance="ghost-light" heading="Ghost light"> This is the second item's accordion body. </VAccordionItem>

      <VAccordionItem appearance="filled" heading="Filled"> This is the third item's accordion body. </VAccordionItem>
    </VAccordion>

</template>

<vwc-accordion expand-mode="multi">
  <vwc-accordion-item heading="Ghost (default)"> This is the first item's accordion body. </vwc-accordion-item>
  <vwc-accordion-item heading="Ghost light" appearance="ghost-light">
    {' '}
    This is the second item's accordion body.{' '}
  </vwc-accordion-item>
  <vwc-accordion-item heading="Filled" appearance="filled">
    {' '}
    This is the third item's accordion body.{' '}
  </vwc-accordion-item>
</vwc-accordion>

Icon

Use the icon slot to add an icon from the icon library to the Accordion Item heading.

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

<template>
  <VAccordion>
    <VAccordionItem heading="Accordion item 1"
      ><template #icon><VIcon name="accessibility-line" /></template> This is the first item's accordion body.
    </VAccordionItem>
    <VAccordionItem heading="Accordion item 2"
      ><template #icon><VIcon name="ai-line" /></template> This is the second item's accordion body.
    </VAccordionItem>
  </VAccordion>
</template>

<vwc-accordion>
  <vwc-accordion-item heading="Accordion item 1">
    <vwc-icon slot="icon" name="accessibility-line"></vwc-icon> This is the first item's accordion body.{' '}
  </vwc-accordion-item>
  <vwc-accordion-item heading="Accordion item 2">
    <vwc-icon slot="icon" name="ai-line"></vwc-icon> This is the second item's accordion body.{' '}
  </vwc-accordion-item>
</vwc-accordion>

Icon Trailing

Use the icon-trailing attribute to postfix the icon in place of the Accordion Item’s chevron.

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

Size

Use the size attribute to control the size of the Accordion Item.

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

<template>
  <div class="container">
    <div class="example">
      <b>Normal</b>
      <VAccordion class="accordion">
        <VAccordionItem size="normal" heading="Accordion item 1"> This is the first item's accordion body. </VAccordionItem>
        <VAccordionItem size="normal" heading="Accordion item 2"> This is the second item's accordion body. </VAccordionItem>
      </VAccordion>
    </div>

      <div class="example">
        <b>Condensed</b>
        <VAccordion class="accordion">
          <VAccordionItem size="condensed" heading="Accordion item 1"> This is the first item's accordion body. </VAccordionItem>
          <VAccordionItem size="condensed" heading="Accordion item 2"> This is the second item's accordion body. </VAccordionItem>
        </VAccordion>
      </div>
    </div>

</template>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  gap: 48px;
  inline-size: 100%;
}

.example {
  flex-grow: 1;
  inline-size: 100%;
}

.accordion {
  margin-top: 16px;
  display: block;
}
</style>

<div class="container">
  <div class="example">
    <b>Normal</b>
    <vwc-accordion class="accordion">
      <vwc-accordion-item size="normal" heading="Accordion item 1"> This is the first item's accordion body. </vwc-accordion-item>
      <vwc-accordion-item size="normal" heading="Accordion item 2"> This is the second item's accordion body. </vwc-accordion-item>
    </vwc-accordion>
  </div>
  <div class="example">
    <b>Condensed</b>
    <vwc-accordion class="accordion">
      <vwc-accordion-item size="condensed" heading="Accordion item 1"> This is the first item's accordion body. </vwc-accordion-item>
      <vwc-accordion-item size="condensed" heading="Accordion item 2"> This is the second item's accordion body. </vwc-accordion-item>
    </vwc-accordion>
  </div>
</div>

<style>
  .container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    inline-size: 100%;
  }
  .example {
    flex-grow: 1;
    inline-size: 100%;
  }
  .accordion {
    margin-top: 16px;
    display: block;
  }
</style>

No Indicator

Use the no-indicator attribute on Accordion Item to remove indicator icon from the heading element.

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

<template>
  <VAccordion>
    <VAccordionItem no-indicator heading="Accordion item 1"> This is the first item's accordion body. </VAccordionItem>

      <VAccordionItem no-indicator heading="Accordion item 2"> This is the second item's accordion body. </VAccordionItem>

      <VAccordionItem no-indicator heading="Accordion item 3"> This is the third item's accordion body. </VAccordionItem>
    </VAccordion>

</template>

<vwc-accordion>
  <vwc-accordion-item no-indicator heading="Accordion item 1">
    {' '}
    This is the first item's accordion body.{' '}
  </vwc-accordion-item>
  <vwc-accordion-item no-indicator heading="Accordion item 2">
    {' '}
    This is the second item's accordion body.{' '}
  </vwc-accordion-item>
  <vwc-accordion-item no-indicator heading="Accordion item 3">
    {' '}
    This is the third item's accordion body.{' '}
  </vwc-accordion-item>
</vwc-accordion>