Applying slide down transition to border on Vue Accordion component

Question

I am trying to apply a slide-down Transition to this Accordion component but I am not getting the expected behavior. The transition gets applied to the content/text inside the accordion but I would like to achieve for the border line to have a slide-up/slide-down effect. How can I achieve this? Note that the accordion has a border-bottom that I would like for it to slide down/up as well.

<template>
  <div v-for="(item, index) in accordionItems" :key="index">
    <div class="border-t border-inactive-grey" v-if="item.title && item.description">
      <div
        class="flex justify-between cursor-pointer py-4 px-2"
        @click="onExpandCollapse(index)">
        <div>
          {{ item.title }}
        </div>
        <div class="flex items-center">
          <AppIconComponent
            class="expand-section-chevron"
            :class="{ rotate: indexExpanded === index }"
            :name="down-chevron"
            size="13px" />
        </div>
      </div>
      <Transition name="fade">
        <div class="px-2 pb-4" v-if="index === indexExpanded && item.description">
          <div data-test="description" v-html="item.description"></div>
          <slot></slot>
        </div>
      </Transition>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from "vue";
import { AppIconComponent } from "@/components";
import { Accordion, JunIconName } from "@/types";

export default defineComponent({
  name: "AppAccordionItem",
  props: {
    accordionItems: {
      type: Array as PropType<Accordion[]>,
      default: () => [],
    },
  },
  components: {
    AppIconComponent,
  },
  setup(props) {
    const indexExpanded = ref(-1);

    indexExpanded.value = props.accordionItems?.findIndex((item) => {
      return item.title && item.description;
    });

    const onExpandCollapse = (index: number) => {
      if (indexExpanded.value === index) indexExpanded.value = -1;
      else indexExpanded.value = index;
    };

    return {
      indexExpanded,
      onExpandCollapse,
    };
  },
});
</script>
<style scoped lang="scss">
.expand-section-chevron {
  transition: transform 0.3s ease-in-out !important;
}

.expand-section-chevron.rotate {
  transform: rotate(180deg);
}

.fade-enter-active,
.fade-leave-active {
  transition: height 0.3s ease-in-out;
}

.fade-enter-from,
.fade-leave-to {
  height: 0 !important;
}
</style>

Applying slide down transition to border on Vue Accordion component

0 Answers0