vue-faq-accordion is a simple and smooth vue.js accordion component designed for the FAQ section.

vue js accordion codesandbox demo, vue faq accordion, simple vue accordion, faq in vue js, vue accordion npm, nuxt accordion

Responsive FAQ Accordion Dropdown In HTML and CSS

How to make use of it:

Install & Download:

npm i vue-faq-accordion

yarn add vue-faq-accordion

Usage

<template>
  <VueFaqAccordion 
    :items="myItems"
  />
</template>

<script>
import VueFaqAccordion from 'vue-faq-accordion'

export default {
  components: {
    VueFaqAccordion
  },
  data () {
    return {
      myItems: [
          {
            title: 'How many time zones are there in all?',
            value: 'Given a 24-hour day and 360 degrees of longitude around the Earth',
            category: 'Tab-1'
          },
          {
            title: 'How long is a day and year on Venus?',
            value: 'Venus takes 224.7 Earth days to complete one orbit around the Sun.',
            category: 'Tab-2'
          },
          {
            title: 'What animal smells like popcorn?',
            value: 'Binturongs smell like popcorn.',
            category: 'Tab-2'
          }
        ]
    }
  }
}
</script>

Props

props: {

  /**
   * Array of items
   * Object style {questionProperty: string, answerProperty: string, tabName: string}
   * You can change object keys names using other props (questionProperty, answerProperty, tabName)
   */
  items: {
    type: Array,
    required: true
  },

  /**
   * Key name of object in items array for specifying title of question
   */
  questionProperty: {
    type: String,
    default: 'title'
  },
  
  /**
   * Key name of object in items array for specifying content text of open question
   */
  answerProperty: {
    type: String,
    default: 'value'
  },
  
  /**
   * Key name of object in items array for specifying navigation tab name
   */
  tabName: {
    type: String,
    default: 'category'
  },
  
 /**
  * Color for hover and active tab/question
  * possible format: 'red', '#F00', 'rgba(255, 0, 0, 1)'
  */
  activeColor: {
    type: String,
    default: '#D50000'
  },
  
  /**
   * Color for borders
   */
  borderColor: {
    type: String,
    default: '#9E9E9E'
  },
  
  /**
   * Color for fonts
   */
  fontColor: {
    type: String,
    default: '#000000'
  },

  /**
   * Opened by default tabName (category)
   */
  initialTab: {
    type: String,
    default: null
  },

  /**
   * Opened by default question
   * All closed by default
   */
  initialQuestionIndex: {
    type: Number,
    default: null
  }
  
}

Events

Smooth FAQ Accordion, vue-faq-accordion Plugin/Github

See Demo And Download

Official Website(gerasimvol): Click Here

This superior jQuery/javascript plugin is developed by gerasimvol. For extra advanced usage, please go to the official website.