Vue HeightCollapsible

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


Vue HeightCollapsible

!logo

Demo

style="max-width: 360px; height: auto;"
alt="demo">

Codesandbox simple Vue		View	Edit
Codesandbox multiple Vue		View	Edit
Codesandbox simple Vue 3		View	Edit

CSS required

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

``html

`

Alternatively you can add it using the transition prop.

Supported versions

$3

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

$3

`vue
import HeightCollapsible from "vue-height-collapsible";
`

$3

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

$3

The source file could be copied. It is only this file.

vue-height-collapsible.vue

Usage example

$3

`vue



`

$3

`vue



`

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.

`html

Paragraph of text

`

#### tag : string

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

`html

Paragraph of text

`

#### 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

This was created with heavy inspiration from

https://github.com/kunukn/react-collapse

Development

The compiler in this repository works for Vue 2 version.

This library was created using https://github.com/team-innovation/vue-sfc-rollup