collapsible.vue

<template>
  <div class="collapsible" :class="{ open }">
    <div class="collapsible-content">
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  open: boolean
}>()
</script>

<style scoped lang="scss">
.collapsible {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.5s;

  &-content {
    min-height: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }

  &.open {
    grid-template-rows: 1fr;

    .collapsible-content {
      opacity: 1;
      visibility: visible;
    }
  }
}
</style>