@vuesimple/vs-accordion

Vue Simple Tag

🗃 A simple vue accordion. Perfect for all your accordion, faq's scenarios.

A light weight vue plugin built groundup.

📺 Live Demo

Demo: Link

🛠 Install

npm i @vuesimple/vs-accordion

🚀 Usage

<template>
  <vs-accordion :is-box="true" is-compact>
    <vs-accordion-item v-for="(n, index) in [1, 2, 3]" :key="index">
      <!-- This slot will handle the title of the accordion and is the part you click on -->
      <template slot="accordion-trigger">
        <h4>Item {{ n }}</h4>
      </template>

      <!-- Default content -->
      <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
      </div>
    </vs-accordion-item>
  </vs-accordion>
</template>

<script>
  import { VsAccordion, VsAccordionItem } from '@vuesimple/vs-accordion';

  export default {
    components: {
      VsAccordion,
      VsAccordionItem,
    },
  };
</script>

🌎 CDN

<script src="https://unpkg.com/@vuesimple/vs-accordion@<version>/dist/vs-accordion.min.js"></script>

// Main/Entry file
app.use(VsAccordion.plugin);

<template>
  <vs-accordion :is-box="true" is-compact>
    <vs-accordion-item v-for="(n, index) in [1, 2, 3]" :key="index">
      <!-- This slot will handle the title of the accordion and is the part you click on -->
      <template slot="accordion-trigger">
        <h4>Item {{ n }}</h4>
      </template>

      <!-- Default content -->
      <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
      </div>
    </vs-accordion-item>
  </vs-accordion>
</template>

⚙ Props

VsAccordion

🔥 Events

VsAccordionItem

📎 Slots

VsAccordion

You can define own item markup via slots:

VsAccordionItem

You can define own item markup via slots: