vue-accordion-component

Install

NPM

Install the package:

npm install @profesia/vue-accordion-component --save-dev

Then import it in your project

import Vue from 'vue'
import {accordion} from '@profesia/vue-accordion-component'

Vue.component('accordion', accordion)

Browser global

Just include vue & accordion

<script src="path/to/vue.js"></script>
<script src="path/to/dist/js/accordion.min.js"></script>

Usage

Simply use it like so:

<accordion :items="items" :selectors="{ id: 'id', title: 'myTitle', content: 'post' }" :active="activeItemsOnStart" :collapseAll="false" ref="accordion"></accordion>

Options

items

Mandatory. An array of objects to create the panels inside the accordion. Default structure:

[
    {
      title: 'Title',
      content: 'text',
    },
    {
      title: 'Title 2',
      content: 'text 2',
    }
]

selectors

Optional. An object, which contains names of your selectors in items object list. Default selectors are:

id: 'id',
title: 'title',
content: 'content'

active

Optional. A string, a number or an array of ids, or index positions (starts from 0) of items, which should be opened at page start. Defaults to null.

collapseAll

Optional. Boolean parameter, which cause each accordion will collapse on another accordion click or not. Defaults to true.

ref

Optional. A string, which you can use for controlling accordions from another places via collapseAccordion method. Example: you have method setAccordion, which should open some accordion after click on element

setAccordion(id) {
    this.$refs.accordion.collapseAccordion(id, true)
}

Named Slots

You can set up items with title and content, or you can use your own templates (slots with names title and content), for example

<template slot="title" slot-scope="{ item }">
    Custom title: {{ item.title }}
</template>
<template slot="content" slot-scope="{ item }">
    Custom content<br>
    {{ item.content }}
</template>

Methods

collapseAccordion

Params id - mandatory - id or index (starts from 0) of item, which should be collapsed leaveOpen - optional - if true, after calling this method the item will stay opened. Defaults to false.

Structure

Once the accordion has been rendered, it'll create the following structure:

<div class="vue-accordion-component">
    <!-- First accordion item-->
    <div class="vue-accordion-item">
        <div class="vue-accordion-header">
            <div class="vue-accordion-title">
                Title
                <svg viewBox="0 0 32 32" class="vue-accordion-icon"><g><rect x="11.31" y="13.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -5.0721 19.7549)" width="20" height="5"></rect> <rect x="0.69" y="13.5" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 6.9348 34.8725)" width="20" height="5"></rect></g></svg>
            </div>
        </div>
        <div class="vue-accordion-content">
            obsah testu 1
        </div>
    </div>
    
    <!-- Second accordion item-->
    <div class="vue-accordion-item">
        ...
    </div>
</div>

All CSS is based upon this structure.

.vue-accordion-component {
  ...
}

.vue-accordion-item {
  ...
}

.vue-accordion-header {
  ...
}

.vue-accordion-title {
  ...
}

.vue-accordion-content {
  ...
}

If you want to modify the styling, take a look at the class props.

FAQ

• Where can I see, how it works? - Go to DEMO and enjoy ;)
• How can I provide feedback? - Send an email to [email protected]; any feedback is appreciated.

Release History

• 2.0.4 - Change babel preset to env
• 2.0.3 - Add class with item ID when ID is filled
• 2.0.2 - Small bug fix
• 2.0.1 - Small bug fix
• 2.0.0 - MINOR CHANGE, complete new version of accordion component
• 1.0.1 - 1.0.7 Fix README
• 1.0.0 Official release with docs
• 0.0.1 Initial release