# @odyzeo/collapse

Simple collapse and toggle Vue.js component and directive.

<a href="https://collapse-ten.vercel.app/" target="_blank">Demo</a>

## Installation

### npm

```
npm install @odyzeo/collapse
```

## Usage

```vue
<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)

```javascript
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
```