Smooth Content Expand/Collapse Transitions – Vue Collapsed

A Vue 3 component to create smooth expand/collapse animations by using CSS3 transitions. Great for accordions.

How to use it:

1.  Import and register the Vue Collapsed.

import { Collapse } from 'vue-collapsed'
createApp(App)
  .component('Collapse', Collapse)
  .mount('#app')

2. Add the Collapse component to the template.

<template>
  <Collapse :when="isOpen" class="my-class">
    <p>Content To Toggle</p>
  </Collapse>
</template>

3. Config the expand/collapse animations.

.my-class {
  transition: height 300ms cubic-bezier(0.3, 0, 0.6, 1);
}

4. Available component props.

/** Boolean value to control collapse. */
when: {
  type: Boolean as PropType<boolean>,
  required: true,
},

/** Element tag to use instead of `div`. */
as: {
  type: String as PropType<keyof HTMLElementTagNameMap>,
  required: false,
  default: 'div',
},

/** Callback on expand transition completed. */
onExpanded: {
  type: Function as PropType<() => void>,
  required: false,
  default: () => {},
},

/** Callback on collapse transition completed. */
onCollapsed: {
  type: Function as PropType<() => void>,
  required: false,
  default: () => {},
},

Preview:

expand-collapse-transitions

Changelog:

v1.0.0 (11/26/2022)

  • Collapse’s template ref has been exposed via defineExpose and can be now accessed from your parent component.
  • border: 0 none and margin: 0properties are now enforced on the Collapse root element along with padding: 0.
  • Internal composable

Download Details:

Author: smastrom

Live Demo: https://vue-collapsed.netlify.app/

Download Link: https://github.com/smastrom/vue-collapsed/archive/refs/heads/main.zip

Official Website: https://github.com/smastrom/vue-collapsed

Install & Download:

# Yarn
$ yarn add vue-collapsed

# NPM
$ npm i vue-collapsed

Add Comment