oa/documentation/accordion/accordion-default-documentation.md

VAccordion

Vuero provides 2 accordion components with enough styling to be able to use them out of the box: <VAccordion /> and <VCollapse />. In the simple accordion, each item can be openened separately, whereas in the exclusive accordion, only one item can be expanded at a time. Pass an Array to the items props to render the accordion.

<script setup lang="ts">
const data = [
  {
    title: 'Accordion Item 1',
    content: 'Sed ut perspiciatis unde omnis iste ...',
  },
  {
    title: 'Accordion Item 2',
    content: 'Sed ut perspiciatis unde omnis iste ...',
  },
  {
    title: 'Accordion Item 3',
    content: 'Sed ut perspiciatis unde omnis iste ...',
  },
]
</script>

<template>
  <div class="column is-6">
    <VAccordion :items="data" />
  </div>

  <div class="column is-6">
    <VAccordion :items="data" exclusive />
  </div>
</template>