Vue-height-collapsible NPM

Vue HeightCollapsible

Collapsible component with CSS transition for elements with variable and dynamic height.

Vue HeightCollapsible

Demo

CSS required

:warning: ️You need to add style (transition) in your own stylesheet to add animation. Here is an example.

<style>
  [data-height-collapsible] {
    transition: height 280ms cubic-bezier(0.4, 0, 0.2, 1);
  }
</style>

Alternatively you can add it using the transition prop.

Supported versions

Vue 2 and Vue 3

npm install vue-height-collapsible
// or yarn install vue-height-collapsible

Vue 2

import HeightCollapsible from "vue-height-collapsible";

Vue 3

import HeightCollapsible from "vue-height-collapsible/vue3";

Alternative approach

The source file could be copied. It is only this file. vue-height-collapsible.vue

Usage example

Simple

<template>
  <div class="my-component">
    <button @click="isOpen = !isOpen">Toggle</button>
    <HeightCollapsible :isOpen="isOpen">
      <p>Paragraph of text.</p>
      <p>Another paragraph is also OK.</p>
    </HeightCollapsible>
  </div>
</template>

<script>
import HeightCollapsible from 'vue-height-collapsible'

export default {
  name: 'MyComponent',
  components: {
    HeightCollapsible,
  },
  data() {
    return {
      isOpen: true,
    }
  },
}
</script>

Using Aria and scoped slots

<template>
  <div class="my-component">
    <button
      @click="isOpen = !isOpen"
      :aria-expanded="isOpen"
      aria-controls="my-collapsible-1"
    >
      <span>Toggle {{ collapseState }}</span>
    </button>
    <HeightCollapsible
      :isOpen="isOpen"
      @update="onUpdate"
      v-slot="{ state }"
      id="my-collapsible-1"
    >
      <p>I know the collapse state: {{ state }}</p>
      <p>Paragraph of text.</p>
      <p>Another paragraph is also OK.</p>
      <p>Images and any other content are ok too.</p>
    </HeightCollapsible>
  </div>
</template>

<script>
import HeightCollapsible from 'vue-height-collapsible'

export default {
  name: 'MyComponent',
  components: {
    HeightCollapsible,
  },
  data() {
    return {
      isOpen: true,
      collapseState: '',
    }
  },
  methods: {
    onUpdate({ state }) {
      this.collapseState = state
    },
  },
}
</script>

Properties

Prop	Type	Default
isOpen	boolean	true
transition	string
tag	string	div
overflowOnExpanded	boolean	false

`isOpen` : boolean

Expands or collapses content.

`transition` : string

You can also specify a CSS transition inline by using the transition prop.

<HeightCollapsible transition="height 300ms ease-in-out" :isOpen="isOpen">
  <p>Paragraph of text</p>
</HeightCollapsible>

`tag` : string

You can specify the HTML element type for the collapse component. By default the element type is a div element.

<HeightCollapsible tag="article" :isOpen="isOpen">
  <p>Paragraph of text</p>
</HeightCollapsible>

`overflowOnExpanded` : boolean

If added, then overflow: hidden inline style will not be added when the state is expanded.

npm

https://www.npmjs.com/package/vue-height-collapsible

CDN files

To see all the available CDN files go to https://unpkg.com/browse/vue-height-collapsible/

Design goals

let the browser handle the animation using CSS height transition
minimal in file size
minimalistic API - only have a Collapsible component which updates on isOpen props
flexible - provide your own markup, styling and easing
interruptible - can be reversed during movement
inert - when collapsed you should tab over the collapsed component
availability - from cdn or npm install, commonjs, minified or ES module
collapsible on height only