Не работает анимация после второго клика по заголовку

Question

При нажатии на блок с заголовком, появляется или скрывается текст.

Работает хорошо, но после двух анимации заголовок становится некликабельной, и для анимации нужно кликнуть пустую область сверху.

var question = document.querySelector('.question');
question.onclick = function() {
  var answer = document.querySelector('.answer');
  if (answer.classList.contains('delete')) { //начальное состояние вопроса
    answer.classList.remove('delete');
    answer.classList.add('active-a');
  } else if (answer.classList.contains('delete-a')) { //если уже происходила анимация
    answer.classList.remove('delete-a');
    answer.classList.add('active-a');
  } else if (answer.classList.contains('active-a')) { //для скрытия элемента
    answer.classList.remove('active-a');
    answer.classList.add('delete-a');
  }
}

.question {
  height: 30px;
  display: flex;
  margin-left: 15%;
  cursor: pointer;
}

.question h2 {
  margin-left: 30px;
  height: 30px;
  color: #f7654a;
}

.answer p {
  font-size: 16px;
  line-height: 22px;
  color: #999999;
  width: 730px;
  height: 83px;
  margin-left: 15%;
  margin-top: 40px;
}

.answer.delete {
  visibility: hidden;
  margin-top: -40px;
}

.answer.active-a {
  visibility: visible;
  transform: translateY(50px);
  transition: 2s;
}

.answer.delete-a {
  opacity: 0;
  transform: translateY(-40px);
  transition: 2s;
}

<div class="question">
  <h2>РАБОТАЕТЕ ЛИ ВЫ ПО 249 ФЗ?</h2>
</div>
<div class="answer delete">
  <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
    Lorem Ipsum для распечатки образцов.</p>
</div>

Answer 1

У Вас блок .answer перекрывает кнопку в момент когда он поднимается наверх.

Правильно было бы сделать так что бы при скрытии блоку присваивалось свойство display со значением "none", таким образом он бы уже не смог ни на что повлиять.

Что бы не менять Ваши стили я привел пример с использованием относительной позиции и отрицательным z-index:

const handleClick = () => {
  const answer = document.querySelector(".answer")
  answer.classList.toggle("hide")
}

document.querySelector(".question").addEventListener("click", handleClick)

.question {
  cursor: pointer;
}

.question h2 {
  color: #f7654a;
}

.answer {
  position: relative;
  z-index: 1;
  transition: visibility 2s ease, margin 2s ease;
}

.answer.hide {
  position: relative;
  visibility: hidden;
  margin-top: -20px;
  z-index: -1;
}

.answer p {
  font-size: 16px;
  line-height: 22px;
  color: #999999;
  margin-top: 20px;
}

<div class="question">
  <h2>РАБОТАЕТЕ ЛИ ВЫ ПО 249 ФЗ?</h2>
</div>
<div class="answer hide">
  <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
    Lorem Ipsum для распечатки образцов.</p>
</div>

Answer 2

Это можно решить попроще, просто добавляя/удаляя 1, а не 3 класса

Чтобы не было перекрытия, нужно задать z-index (кто спереди, кто сзади), кнопку (в вашем случае тег h2) поставить выше z-index: 1, а двигающийся блок ниже z-index: -1. Также, чтобы это всё заработало, надо задать, относительно кого это перекрытие будет происходить. Для этого можно прописать для body position: relative, или для любого другого родительского контейнера

const question = document.querySelector('.question h2');
const answer = document.querySelector('.answer');
question.addEventListener('click', () => {
  answer.classList.toggle('active');
});

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  position: relative;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 10px;
}

.question,
.answer {
  text-align: center;
}

.question {
  display: flex;
  justify-content: center;
}

.question h2 {
  color: #f7654a;
  z-index: 1;
  cursor: pointer;
}

.answer p {
  font-size: 16px;
  line-height: 22px;
  color: #999999;
}

.answer {
  visibility: hidden;
  opacity: 0;
  transform: translateY(0px);
  transition-property: visibility, opacity, transform;
  transition-duration: 1s;
  transition-timing-function: linear;
  z-index: -1;
}

.answer.active {
  visibility: visible;
  opacity: 1;
  transform: translateY(40px);
}

<div class="container">
  <div class="question">
    <h2>РАБОТАЕТЕ ЛИ ВЫ ПО 249 ФЗ?</h2>
  </div>
  <div class="answer">
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
      Lorem Ipsum для распечатки образцов.</p>
  </div>
</div>

БЛОГ НА HUSL

Не работает анимация после второго клика по заголовку

Ответы (2 шт):