footer vuejs componenter

file.vue

<template>
  <section class="footer-accordeon" :class="{ '-open': open }">
    <header class="header" @click="open = !open">
      <h4 class="title">{{ title }}</h4>
      <batista-icon class="icon" icon="arrow_down" size="9" />
    </header>
    <div class="content" :style="contentStyle">
      <slot />
    </div>
  </section>
</template>

<script>
export default {
  props: {
    title: String,
    beginOpened: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      open: false
    }
  },
  computed: {
    contentHeight () {
      const slots = this.$slots.default
      const slot = slots.length ? slots[0] : null
      const contentHeight = slot ? slot.elm.clientHeight : 0
      return contentHeight
    },
    maxHeight () {
      const maxHeight = (this.open ? '800' : 0) + 'px'
      return maxHeight
    },
    contentStyle () {
      const { maxHeight } = this
      const contentStyle = {
        maxHeight
      }
      return contentStyle
    }
  },
  mounted () {
    if (this.beginOpened) {
      setTimeout(() => { this.open = true }, 0)
    }
  }
}
</script>

<style lang="scss">
.footer-accordeon {
  & > .header {
    background-color: $batista-main-bg-color;
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    padding: inner-base();
    border-bottom: 1px solid $batista-border-color;
    & > .title {
      color: $batista-main-color;
      margin: auto 0;
    }

    & > .icon {
      fill: $batista-main-color;
      margin: auto 0 auto auto;
      transform: rotate(0);
      transition: transform 0.3s ease;
    }
  }
  & > .content {
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  &.-open {
    & > .header > .icon {
      transform: rotate(180deg);
    }
  }
}
</style>