@odyzeo/collapse

Simple collapse and toggle Vue.js component and directive.

Demo

Installation

npm

npm install @odyzeo/collapse

Usage

<template>
    <div id="app">
        <h2>Collapse</h2>
        <a
            v-toggle.collapse
            href
            @click.prevent
        >
            OPEN
        </a>
        <collapse id="collapse">
            <p>Collapse content</p>
        </collapse>
    </div>
</template>

<script>
import {
    Collapse,
    Toggle,
} from '@odyzeo/collapse';

export default {
    name: 'App',
    components: {
        Collapse,
    },
    directives: {
        Toggle,
    },
};
</script>

Or register like plugin (Collapse component, Toggle directive registered globally)

import Collapse from '@odyzeo/collapse';

Vue.use(Collapse);

Props

Property name	Type	Default value	Description
id	String	null	bind v-toggle to directive on element
value	Boolean	false	set default toggle state
accordion	String	null	Group multiple collapse elements into one group, where only one can be open

Development

npm run serve

Publishing

# Assuming all tested, committed and works like a charm!
npm version {patch|minor|major} # See semantic version
npm run build-lib
npm run publish
git push
git push --tags # Add release on GitHub