Как по клику добавить класс?

Question

[Дмитрий]

На странице есть блок комментарий, по нажатию на кнопку ответить нужно показать форму, где будет вводиться ответ, если форма показана и пользователь нажал на другом комментарии кнопку ответить, активную форму нужно скрыть и показать в другом месте. Как это можно сделать?

<div class="comment">
  <div class="comment-item">
    <div class="comment-item__text">Комментарий</div>
    <div class="comment-item__reply">Ответить</div>
    <div class="comment-item__form">
      <form action="">
        <textarea name="" id="" cols="30" rows="5" class="" placeholder="Ваш комментарий"></textarea>
      </form>
    </div>
  </div>
  <hr>
  <div class="comment-item">
    <div class="comment-item__text">Комментарий</div>
    <div class="comment-item__reply">Ответить</div>
    <div class="comment-item__form">
      <form action="">
        <textarea name="" id="" cols="30" rows="5" class="" placeholder="Ваш комментарий"></textarea>
      </form>
    </div>
  </div>
</div>

.comment {
  width: 100%;
}

.comment-item {
  max-width: 350px;
  margin: 0 auto;
  margin-bottom: 50px;
}

.comment-item__text {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 10px;
}

.comment-item__reply {
  margin-bottom: 15px;
  cursor: pointer;
}

.comment-item__form {
  display: none;
}

Answer 1

[0xD34F]

.comment-item.active .comment-item__form {
  display: block;
}

const itemSelector = '.comment-item';
const buttonSelector = '.comment-item__reply';
const activeClass = 'active';

document.addEventListener('click', e => {
  const item = e.target.closest(buttonSelector)?.closest(itemSelector);
  if (item) {
    document.querySelectorAll(itemSelector).forEach(n => {
      n.classList.toggle(activeClass, n === item);
    });
  }
});

Comments

[Дмитрий]

Спасибо