Collapsable

Animate a DOM element from its natural height to 0 and vice-versa.

Usage

The main advantage of this directive is to not require a wrapper element. To make an element collapsable, just add the v-bt-collapsable directive to it:

<div v-bt-collapsable="{opened: true}">
    Content
</div>

The binding expects and opened attribute that control the element's visibility.

Event

You can listen to the visibility status using the collapsable-opened event:

<div v-bt-collapsable="{opened: opened}" @collapsable-change="onChange">
    ...
</div>

It emits a CustomEventopen in new window that contains the opened flag as detail:

function onChange(event: CustomEvent): void {
    console.log(event.detail); // `true` if the element is expanded.
}

NOTE

The event will only emit at the end of the transition. When the item is totally hidden or visible.

Transition

To control the transition, just set a CSS transition on the collapsable element:

<div class="collapsable" v-bt-collapsable="{opened}">
    ...
</div>

.collapsable {
    transition: height 0.8s ease-in-out;
}

The directive will automatically adjust to the timing of your transition.

Demo

Options

Name	Description	Default
opened	If `false`, the element's height is reduced to 0px.	`false`

# Collapsable

# Usage

# Event

# Transition