@kunukn/vue-collapse

<template>
  <div class="app">
    <button
      @click="isCollapsed = !isCollapsed"
      :aria-expanded="!isCollapsed"
      aria-controls="my-description"
    >
      {{ display }}
    </button>

    <VueCollapse
      id="my-description"
      :when="isCollapsed"
      @event="onEvent"
      v-slot="{ state }"
    >
      <p class="long-text">
        I know the state: {{ state }}. Lorem Ipsum is simply dummy text of the
        printing and typesetting industry.
      </p>
    </VueCollapse>
  </div>
</template>

<script setup>
import { VueCollapse } from '@kunukn/vue-collapse'
import { ref } from 'vue'

const isCollapsed = ref(false)
const display = ref('')

const onEvent = (state) => {
  display.value = 'event ' + state
}
</script>

<style>
/* Custom easing */
.vue-collapse[data-vue-collapse-transition] {
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
</style>

• Minimal in file size
• Let the browser handle the animation using CSS transition
• Minimalistic API
• 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
• Collapsible on height only