JSFiddle - React, Tailwind, and code Playground

by gayanov2017

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="app">
  <section class="page-top-section set-bg">
    <div class="container">
      <h2>FAQ</h2>
      <div class="site-breadcrumb">
        <router-link :to="{ name: 'home'}">Главная</router-link> / <span>FAQ</span>
      </div>
    </div>
  </section>
  <section class="features-section spad faq">
    <div class="container">
      <div class="section-title">
        <h2>Ответы на часто задаваемы вопросы</h2>
      </div>
      <div class="row">
        <div class="col-lg-12" v-for="(question, i) in questions" :key="i">
          <div class="card body">
            <button @click="show = !show" class="btn btn-dark-purple" type="button" data-toggle="collapse" :data-target="'#question-'+i" selected="false">
              {{ question['title'] }}
            </button>
          </div>
          <transition name="question">
            <div v-if="show" class="collapse show" :id="'#question-'+i">
              <div class="card">
                <div class="card-body answer">
                  {{ question['answer'] }}
                </div>
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>
  </section>
</div>

JavaScript

var accordion = {
  data() {
    return {
      show: false,
      questions: [
        {
          title: 'Куда я смогу вывести заработанные средства?',
          answer:
          'Деньги вы можете выводить на  Qiwi, WebMoney, Яндекс.Деньги, мобильные телефоны и пластиковые карточки. \n' +
          'Заявка на вывод денежных средств оставляется во вкладке «Баланс» в панели управления. \n' +
          'Вывод происходит автоматически в течение 10 минут.'
        },
        {
          title: 'Я могу подключить свой домен к магазину?',
          answer:
          'Да, можете, следуя по инструкции в панели управления в разделе «Настройки магазина» добавить свой домен'
        },
        {
          title: 'Как осуществляется выдача товара на сервер?',
          answer:
          'Выдача товара осуществляется через RCON'
        },
      ]
    }
  }
};
new Vue({
  el: '#app',
  components: {
    accordion
  }
});