Кнопка показать / скрыть div в javascript, переключатель не работает

Question

У меня есть html код:

<div class="feedback-middle">
  <button id="btn-1" class="bt1"><p class="b1">What is netflix</p></button>
  <div id="btn-1-content" class="aa">ssss</div>

  <button id="btn-2" class="bt1"><p class="b1">What is netflix</p></button>
  <div id="btn-2-content" class="aa">ssss</div>

  <button id="btn-3" class="bt1"><p class="b1">What is netflix</p></button>
  <div id="btn-3-content" class="aa">ssss</div>
</div>

и код CSS:

#btn-1-content,
#btn-2-content,
#btn-3-content {
  display: none;
}

.show {
  display: block !important;
  height: 100px;
  background: #303030;
  width: 40%;
}

и код js:

var buttons = document.querySelectorAll(".bt1");
var content = document.querySelectorAll(".aa");

function remove() {
  content.forEach((item) => item.classList.remove("show"));
}

buttons.forEach((item) =>
  item.addEventListener("click", function (e) {
    remove();
    const contents = document.querySelector(`#${this.id}-content`);
    contents.classList.toggle("show");
  })
);

Так что проблема с этим в том, что, когда я нажимаю кнопку в первый раз, я открываю div внизу, но когда я нажимаю на него во второй раз, я хочу, чтобы div закрывался, но это не так

Answer 1

Оказывается, я не правильно понял вопрос. Проблема в том, что вы удаляете класс show из всех элементов содержимого в функции remove(). Затем вы снова добавляете класс show в соответствующий div содержимого, который фактически не переключает содержимое.

Простое исправление. Внутри функции remove() удаляйте класс show, только если он уже есть у div. Вот скрипка https://jsfiddle.net/sap4bn8d/

Обновление Мы забыли войти, чтобы удалить класс show, если соответствующий контент уже показан. Вот исправление: https://jsfiddle.net/sap4bn8d/1/

Answer 2

Чтобы достичь того, что вы ищете, вам нужно немного изменить логику c. По сути, вам придется переключить show для содержимого, которое соответствует нажатой кнопке, затем вам придется удалить все show из содержимого, которое не имеет идентичного идентификатора кнопки.

См. Фрагмент ниже, теперь все содержимое, кроме того, которое не было нажато, закрыто, и если это так, если вы нажмете ту же кнопку еще раз, оно переключит его содержимое.

var buttons = document.querySelectorAll(".bt1");
var contents = document.querySelectorAll(".a");

buttons.forEach((item) =>
  item.addEventListener("click", function(e) {
    const content = document.querySelector(`#${this.id}-content`);
    content.classList.toggle("show");

    contents.forEach((item) => {
      if (!item.id.startsWith(this.id)) {
        item.classList.remove("show");
      }
    });
  })
);

#btn-1-content,
#btn-2-content,
#btn-3-content {
  display: none;
}

.show {
  display: block !important;
  height: 100px;
  background: #ccc;
  width: 40%;
}

<div class="feedback-middle">
  <button id="btn-1" class="bt1"><p class="b1">What is netflix</p></button>
  <button id="btn-2" class="bt1"><p class="b1">What is netflix</p></button>
  <button id="btn-3" class="bt1"><p class="b1">What is netflix</p></button>
</div>
<div id="btn-1-content" class="a">A</div>
<div id="btn-2-content" class="a">B</div>
<div id="btn-3-content" class="a">C</div>