Collapsible library based on CSS transition for Vue
npm install vue-height-collapsible
style="max-width: 360px; height: auto;"
| Codesandbox simple Vue | View | Edit | |
| Codesandbox multiple Vue | View | Edit | |
| Codesandbox simple Vue 3 | View | Edit |
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
Paragraph of text.
Another paragraph is also OK.
`
$3
`vue
@click="isOpen = !isOpen"
:aria-expanded="isOpen"
aria-controls="my-collapsible-1"
>
Toggle {{ collapseState }}
:isOpen="isOpen"
@update="onUpdate"
v-slot="{ state }"
id="my-collapsible-1"
>
I know the collapse state: {{ state }}
Paragraph of text.
Another paragraph is also OK.
Images and any other content are ok too.
`
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`.