@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