vue-collapse-it

Vue directive to expand/collapse elements.

Install

yarn add vue-collapse-it

Browser

<!-- From CDN -->
<script src="https://unpkg.com/[email protected]/dist/vue-collapse-it.umd.js"></script>

Demo

Codepen

Options

| Option | Type | Default | Description | | --------- | ------- | ---------- | ---------------------------------------------- | | directive | string | 'collapse' | name of the directive (v-collapse). | | speed | number | 300 | transition duration in miliseconds. | | collapsed | boolean | false | collapse state of elements used the directive. |

Usage

Import the plugin in your main.js file

import VCollapse from 'vue-collapse-it'

const app = createApp(App)
// use the plugin
app.use(VCollapse)
// or you can set your default options
app.use(VCollapse, {
  directive: '',
  speed: 500,
})
app.mount('#app')

Example usage:

<template>
  <div>
    <!-- you can directly use a single boolean value like this -->
    <div v-collapse="isCollapsed" class="box"></div>

    <!-- or use an object witrh available configs -->
    <div
      v-collapse="{
        speed: 1000,
        collapsed: isCollapsed,
      }"
      class="box"
    ></div>

    <button @click="toggle">toggle</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const isCollapsed = ref(false)

    const toggle = () => {
      isCollapsed.value = !isCollapsed.value
    }

    return {
      isCollapsed,
      toggle,
    }
  },
}
</script>

<style scoped>
.box {
  height: 300px;
  width: 300px;
  background: pink;
  padding: 50px;
  margin: 50px;
}
</style>