Как я могу переключать содержимое данных при нажатии в любом месте блока

Question

Я создаю страницу часто задаваемых вопросов, которая содержит множество вопросов, связанных, как показано ниже. Активный класс добавляет функциональность выпадающего контента. Используемый скрипт:

const toggles = document.querySelectorAll('.faq-toggle');

    toggles.forEach(toggle => {
        toggle.addEventListener('click', () => {
            toggle.parentNode.classList.toggle('active');
        });
    })

Демо:

const toggles = document.querySelectorAll('.faq-toggle');

toggles.forEach(toggle => {
    toggle.addEventListener('click', () => {
        toggle.parentNode.classList.toggle('active');
    });
})

<div class="faq active">
    <h3 class="faq-title">
        Title
    </h3>
    <p class="faq-text">
        Answer
    </p>
    <button class="faq-toggle">
        <i class="fas fa-chevron-down"></i>
        <i class="fas fa-times"></i>
    </button>
</div>

Функция переключения применяется к кнопке, которая добавляет активный класс и, таким образом, создает раскрывающееся меню. Я хочу показывать выпадающий контент всякий раз, когда нажимаю в любом месте карты. В настоящее время раскрывающаяся часть открывается только при нажатии кнопки. Я попытался добавить класс faq-toggle в основной div, но это не сработало. Как мне этого добиться?

Answer 1

Может быть, что-то подобное может помочь тебе. Скажите, если он вам не подходит.

const toggleFaq = evt => {
  const faq = evt.target.parentNode.querySelector('.faq-text');
  if(evt.target.classList.contains('faq-toggle')){
    faq.style.display = faq.style.display === "block" ?
    "none" : "block";
  } else {
    faq.style.display = "none";
  }
  evt.stopPropagation();  
}

const toggles = document.querySelectorAll('.faq-toggle, .faq');

toggles.forEach(toggle => {
  toggle.addEventListener('click', toggleFaq);
})

.faq-text {
  display: none;
}

.faq {
  border: 1px dotted gray;
  margin: 5px;
}

<div class="faq active">
  <h3 class="faq-title">
    Question
  </h3>
  <p class="faq-text">
    Answer
  </p>
  <button class="faq-toggle">
        TOGGLE
    </button>
</div>
<div class="faq active">
  <h3 class="faq-title">
    Question
  </h3>
  <p class="faq-text">
    Answer
  </p>
  <button class="faq-toggle">
        TOGGLE
    </button>
</div>
<div class="faq active">
  <h3 class="faq-title">
    Question
  </h3>
  <p class="faq-text">
    Answer
  </p>
  <button class="faq-toggle">
        TOGGLE
    </button>
</div>

Answer 2

Для переключения всей карты вместо простого наведения на кнопку

Приведенный ниже код переключит активный класс, независимо от того, нажимаете ли вы где-нибудь внутри него или на самой кнопке

const toggles = document.querySelectorAll('.faq');

toggles.forEach(toggle => {
  toggle.addEventListener('click', () => {
    toggle.classList.toggle('active');
  });
})

Answer 3

Вы можете использовать от bind до create context этого. И используйте добавить удалить класс, чтобы добавить и удалить класс.

const faqs = document.querySelectorAll(".faq");
let toggleDiv = function (evt) {
  const isActive = this.classList.contains("active");
  /// reset all
  faqs.forEach((x) => {
    x.classList.remove("active");
  });
  if (!isActive) {
    this.classList.add("active");
  } else {
    this.classList.remove("active");
  }
};
faqs.forEach((faq) => {
  faq.addEventListener("click", toggleDiv.bind(faq));
});

div {
  background-color: azure;
}
div.active{
  border: 1px solid;
  background-color: blue;
}

<div class="questions">
    <div class="faq">
      <h3 class="faq-title">
        Title
      </h3>
      <p class="faq-text">
        Answer
      </p>
      <button class="faq-toggle">
        <i class="fas fa-chevron-down"></i>
        <i class="fas fa-times"></i>
      </button>
    </div>
    <div class="faq">
      <h3 class="faq-title">
        Title
      </h3>
      <p class="faq-text">
        Answer
      </p>
      <button class="faq-toggle">
        <i class="fas fa-chevron-down"></i>
        <i class="fas fa-times"></i>
      </button>
    </div>
  </div>