JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<div class="row">
  <div class="col-lg-12">
    <div class="question">
      <span>Как заказать анонимно?</span>
      <div class="plus">
        <div class="plus-line"></div>
        <div class="plus-line" style="transform: rotate(90deg);position: relative;bottom: 11px;"></div>
      </div>
    </div>
  </div>
</div>
<div class="answer">
  Основная проблема, с которой сталкиваются пользователи, торгующие криптовалютами, заключалась в том, что у них было приложение для доступа ко всем из одного места.
</div>


<div class="row">
  <div class="col-lg-12">
    <div class="question">
      <span>Как заказать анонимно?</span>
      <div class="plus">
        <div class="plus-line"></div>
        <div class="plus-line" style="transform: rotate(90deg);position: relative;bottom: 11px;"></div>
      </div>
    </div>
  </div>
</div>
<div class="answer">
  Основная проблема, с которой сталкиваются пользователи, торгующие криптовалютами, заключалась в том, что у них было приложение для доступа ко всем из одного места. Основная проблема, с которой сталкиваются пользователи, торгующие криптовалютами, заключалась
  в том, что у них было приложение для доступа ко всем из одного места. Основная проблема, с которой сталкиваются пользователи, торгующие криптовалютами, заключалась в том, что у них было приложение для доступа ко всем из одного места. Основная проблема,
  с которой сталкиваются пользователи, торгующие криптовалютами, заключалась в том, что у них было приложение для доступа ко всем из одного места.
</div>


<div class="row">
  <div class="col-lg-12">
    <div class="question">
      <span>Как заказать анонимно?</span>
      <div class="plus">
        <div class="plus-line"></div>
        <div class="plus-line" style="transform: rotate(90deg);position: relative;bottom: 11px;"></div>
      </div>
    </div>
  </div>
</div>
<div class="answer">
  Основная проблема
</div>

CSS

.row {
  margin: 20px 0px 0px 0px;
}

.question {
  width: 240px;
  height: 50px;
  background: #789;
  cursor: pointer;
  font-family: comic sans ms;
  text-align: center;
  color: #fff;
  letter-spacing: 1px;
  line-height: 46px;
}

.answer {
  width: 100%;
  overflow: hidden;
  background: #4CAF50;
  font-family: comic sans ms;
  color: #fff;
  letter-spacing: 1px;
  line-height: 25px;
  cursor: default;
  margin: 0px 0px 0px 0px;
}

JavaScript

allClass(0.4); // время transition

function allClass(transition) {
  let question = document.querySelectorAll('.question'),
    answer = document.querySelectorAll('.answer'),
    arrayHeight = [];
  const props = el => el.getBoundingClientRect();
  [...question].forEach((e, i) => {
    arrayHeight[i] = props(answer[i]).bottom - props(answer[i]).top + 10 + 'px';
    answer[i].style.height = '0px';
    setTimeout(() => answer[i].style.transition = transition + 's', 50);
    e.addEventListener('click', () => {
      [...answer].forEach((e, i) => {
        answer[i].style.height = '0px';
      });
      props(answer[i]).height == 0 ? answer[i].style.height = arrayHeight[i] : '';
    });
  });
}