A Simple Easily Configurable Accordion Component for Vue

Simple Vue component library that allows you to create fully configurable accordion components in a Vue.js application.

dynamic accordion in vue js, custom accordion javascript, nested accordion javascript, simple jquery accordion, create accordion with javascript, expand/collapse in vue js

Pure CSS Accordion Which Works Without Javascript

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-simple-accordion

# NPM
$ npm i vue-simple-accordion --save

1. Import components into your Vue.js application.

// import components
import {
  VsaList,
  VsaItem,
  VsaHeading,
  VsaContent,
  VsaIcon
} from 'vue-simple-accordion';
// import stylesheet
import 'vue-simple-accordion/dist/vue-simple-accordion.css';
// register components
export default {
  components: {
    VsaList,
    VsaItem,
    VsaHeading,
    VsaContent,
    VsaIcon
  }
}

2. Create a basic accordion component as follows:

<vsa-list>
  <vsa-item>
    <vsa-heading>
      Accordion Heading
    </vsa-heading>
    <vsa-content>
      Accordiong Panel
    </vsa-content>
  </vsa-item>
</vsa-list>

3. Props available to configure the accordion component.

tags: {
  type: Object,
  required: false,
  default: {
    list: "dl",
    list__item: "div",
    item__heading: "dt",
    heading__content: "span",
    heading__icon: "span",
    item__content: "dd"
  }
},
transition: {
  type: String,
  required: false,
  default: undefined // vsa-collapse. 
},
initActive: {
  type: Boolean,
  required: false,
  default: undefined
},
forceActive: {
  type: Boolean,
  required: false,
  default: undefined
},
autoCollapse: {
  type: Boolean,
  required: false,
  default: undefined
},
roles: {
  type: Object,
  required: false,
  default: {
    presentation: false,
    heading: false,
    region: true
  }
},
navigation: {
  type: Boolean,
  required: false,
  default: undefined
}

Simple Configurable Accordion Component, vue simple accordion Plugin/Github