<template>
  <div class="faq">
    <div class="faq__item" v-for="faq in faqs" :class="{'faq__item_opened': faq.opened}">
      <div class="faq__item-head">
        <div class="faq__item-question">{{ faq.question }}</div>
        <div class="faq__item-opener">
          <svg class="icon" :class="{'icon-arrow-up': faq.opened, 'icon-arrow-down': !faq.opened}"
               @click="open(faq)">
            <use xlink:href="/static/img/sprite.svg#icon-arrow-down"></use>
          </svg>
        </div>
      </div>
      <div class="faq__item-answer" v-show="faq.opened" style="display: none;">{{ faq.answer }}</div>
    </div>
  </div>
</template>

<script>
    export default {
        name: 'faq',
        props: ['faqs'],
        methods: {
            open(faq){
                faq.opened = ! faq.opened;
                for(let f of this.faqs){
                    if(f !== faq){
                        f.opened = false;
                    }
                }
            },
        },
    }
</script>

<style></style>
