VueCollapse - a flexible accordion plugin for Vue.js 2

In order to make the plugin work we need to download necessary dependencies.

npm install --save-dev vue2-collapse

Next thing to do is adding the plugin to the Vue.

// Import Vue and vue2-collapse
import Vue from 'vue'
import VueCollapse from 'vue2-collapse'

// Loading the plugin into the Vue.
Vue.use(VueCollapse)

Every collapse element requires the <v-collapse-wrapper></v-collapse-wrapper> component which represent single accordion element.

<v-collapse-wrapper>
    <div class="header" v-collapse-toggle>
        Click me to toggle content
    </div>
    <div class="my-content" v-collapse-content>
        This is hiddend content
    </div>
</v-collapse-wrapper>

The div element with header class thanks to v-collapse-toggle directive will be a clickable element which will show and hide the content. Applying v-collapse-content to the element with content class binds it with the toggle element. While clicking on the header element, the content will be toggled.

By the default only one accordion element can be opened, toggling another will close previously opened element.

VueCollapse allows to wrap more elements into a group components <v-collapse-group></v-collapse-group>, which helps with code organisation and provides some additional functionality.

<v-collapse-group :onlyOneActive="true">
    <v-collapse-wrapper> ... </v-collapse-wrapper>
    <v-collapse-wrapper> ... </v-collapse-wrapper>
    <v-collapse-wrapper> ... </v-collapse-wrapper>
    <v-collapse-wrapper> ... </v-collapse-wrapper>
</v-collapse-group>

By the default, each element will stay opened after toggle action, however setting the onlyOneActive to true will prevent group from opening more than one element at the same time- same behaviour as non-grouped elements.

In some cases developers need to create a custom toggle element which not necessarily has to rendered within the wrapper element. VueCollapse provides a solution for that cases. Thanks to Vue's API ref we can assign an external (located outside the wrapper) toggler.

<button v-collapse-toggle="'toggle_first'">Toggle first element</button>
<button v-collapse-toggle="'toggle_second'">Toggle second element</button>

<v-collapse-wrapper ref="toggle_first">
    <div class="my-content" v-collapse-content>
        This is hiddend content
    </div>
</v-collapse-wrapper>
<v-collapse-wrapper ref="toggle_second">
    <div class="content" v-collapse-content>
        This is hiddend content
    </div>
</v-collapse-wrapper>

Notice: the v-collapse-toggle directive was removed from the v-collapse-wrapper component, but it is valid to keep secondary toggler within the wrapper.

VueCollapse allows to nest elements inside each other. The nested element should be rendered within the v-collapse-content directive element.

<v-collapse-wrapper>
    <div class="header" v-collapse-toggle>
        Click me to toggle content
    </div>
    <div class="content" v-collapse-content>
        <v-collapse-wrapper>
            <div class="header" v-collapse-toggle>
                Click toggle to toggle content
            </div>
            <div class="content" v-collapse-content>
                This is hiddend content
            </div>
        </v-collapse-wrapper>
    </div>
</v-collapse-wrapper>

In this section of documentation you will find more detailed description the plugin. Each custom component provides own events and methods which can be used in order to extend functionality.

Wrapper component which should always be a parent of elements which are using v-collapse-content and v-collapse-toggle directives. Each of the v-collapse-wrapper component instance can use following methods, events and stores data, which can be used to perform custom actions.

In this example we are going to create a custom method which will be responsible for opening referred element. In order to get the instance of component we are using ref once again.

Template:

<v-collapse-wrapper ref="open_me">
    <div class="content" v-collapse-content>
        This is hiddend content
    </div>
</v-collapse-wrapper>

Vue instance:

module.exports = {
    ...
    methods : {
        trigger_refered_element : function(){
            this.$refs.open_me.open();
        }
    }
    ...
}

You can also make a reference of group component, that allows you to perform actions on multiple elements without creating multiple refs.

Template:

<v-collapse-group ref="my_group">
    <v-collapse-wrapper>
        <div class="my-content" v-collapse-content>
            This is hiddend content
        </div>
    </v-collapse-wrapper>
    <v-collapse-wrapper>
        <div class="my-content" v-collapse-content>
            This is hiddend content
        </div>
    </v-collapse-wrapper>
</v-collapse-group>

Vue instance:

module.exports = {
    ...
    methods : {
            open_second : function(){
                this.$refs.my_group.elements[1].open(); // opens second element
            }
        }
    ...
}

Events work the same way it is presented in official Vue documentation.

Template:

    <v-collapse-wrapper v-on:beforeClose="my_custom_action">
         <div class="header" v-collapse-toggle>
             Click me to toggle content
         </div>
        <div class="my-content" v-collapse-content>
            This is hiddend content
        </div>
    </v-collapse-wrapper>

Vue instance:

module.exports = {
    ...
    methods : {
            my_custom_action : function(vm){
                console.log(vm); // logs component object before closing itself
            }
        }
    ...
}

Vue collapse wrapper for now accepts only one custom property- active which is used for changing the status of the accordion element.

Notice: the v-bind:active property overrides the default status of element, however the default behaviour of the accordion is not changed. Setting :active="true" to every element of the accordion list which is using :onlyOneActive="true" property on the group component will outcome with opening only the first element.

The status of the collapse element will be set to true while rendering.

Template:

    <v-collapse-wrapper  :active="true">
         <div class="header" v-collapse-toggle>
             Click me to toggle content
         </div>
        <div class="my-content" v-collapse-content>
            This is hiddend content
        </div>
    </v-collapse-wrapper>

The property is reactive so it can be used for more complex usage as well.

Every wrapper component stores necessary data properties, which can be used while extending plugin to own needs.

This is a group component. Sometimes there is a need of creating several different accordion lists. Grouping list elements helps with this and other different cases.

<v-collapse-group :onlyOneActive="true">
    <v-collapse-wrapper> ... </v-collapse-wrapper>
    <v-collapse-wrapper> ... </v-collapse-wrapper>
    <v-collapse-wrapper> ... </v-collapse-wrapper>
</v-collapse-group>

<v-collapse-group>
    <v-collapse-wrapper> ... </v-collapse-wrapper>
    <v-collapse-wrapper> ... </v-collapse-wrapper>
    <v-collapse-wrapper> ... </v-collapse-wrapper>
</v-collapse-group>

First collapse group will allow only one element to be opened at the same time, while the second group can open all of the elements at the same time.

Template:

<v-collapse-group ref="my_group">
    <v-collapse-wrapper>
        <div class="my-content" v-collapse-content>
            This is hiddend content
        </div>
    </v-collapse-wrapper>
    <v-collapse-wrapper>
        <div class="my-content" v-collapse-content>
            This is hiddend content
        </div>
    </v-collapse-wrapper>
</v-collapse-group>

Vue instance:

module.exports = {
    ...
    methods : {
            open_all : function(){
                this.$refs.my_group.openAll(); // opens all elements
            }
        }
    ...
}

This directive ought to be applied on the DOM element which will contain content of single list element. Only this element will be able to be toggled on and off within wrapper component. Element with this directive should not be a parent of the element with v-collapse-toggle directive.

The directive changes a default behavior of the element and allows to click on it in order to toggle list element. Note that this directive should be located within the <v-collapse-wrapper></v-collapse-wrapper> in order to make it working without manual binding. However if there is a need to create the toggle element somewhere else, not inside the wrapper component you can use vue's reference to make it work.