ShowEasyFrontEnd/FrontEnd/components/service/content/faqItem.vue

<template>
  <div>
    <div :class="['tw-head-body tw-text-base-primary tw-font-[600] md:tw-body-3']">
      Q: {{ item.question }}
    </div>
    <div v-show="show" class="tw-head-body tw-text-base-primary tw-font-normal tw-mt-[6px] md:tw-text-[16px]">
      A: {{ item.answer }}
    </div>
  </div>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
    },
  },
  data() {
    return {
      show: true,
      window: {
        width: 0,
      },
    };
  },
  created() {
    if (process.browser) {
      window.addEventListener("resize", this.handleResize);
    }
    this.handleResize();
  },
  mounted() {
    // if (this.window.width >= 768) {
    //   this.show = true;
    // }
  },
  methods: {
    handleResize() {
      if (process.browser) {
        this.window.width = window.innerWidth;
      }
    },
    opendFaq() {
      if (this.window.width <= 768) {
        this.show = !this.show;
      } else {
        this.show = true;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.seeMore {
  position: relative;

  &::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    background-image: url("~/assets/svg/arrow-down-primary.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 9px;
    height: 6px;
    margin-left: 16px;
    transition: all 0.2s linear;
  }

  &.open {
    &::after {
      transform: rotate(180deg);
    }
  }

  @media screen and (min-width: 768px) {
    &::after {
      display: none;
    }
  }
}
</style>