Складной не работает [демоверсия JSFiddle включена]

Question

Я пытаюсь заставить этот складной элемент нормально функционировать и показывать первый набор информации при загрузке страницы, отключать ее, когда пользователь нажимает «читать дальше», и отображать новую информацию.

<script>
    var coll = document.getElementsByClassName("collapsible");
    var i;

    for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener("click", function () {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.display === "block") {
          content.style.display = "none";
        } else {
          content.style.display = "block";
        }
      });
    }

    function display() {
      var x = document.getElementById("cover");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }

  </script> 

Answer 1

Вы присоединяете onclick = display () ко всем элементам списка. GetElementById собирается вернуть первый элемент с заданным идентификатором, в этом случае он всегда нацелен на вашу первую обложку (если вы запускаете это в другом месте вашего скрипта). Так как каждый элемент списка «read more» имеет функцию onclick, вызывающую display (), он всегда попадает в ваш первый элемент (потому что это первый элемент с соответствующим идентификатором). Вместо этого вы можете передать в событие 'ближайший' и передать туда идентификатор (если вы также хотите скрыть изображение). Если нет, то вы можете убрать display () на месте щелчка там.

Другие элементы работают как положено, но вы не видите его, потому что ваш css на контейнере вмещает его (если вы проверите ваш инспектор вы заметите, что css устанавливается как ожидалось). Возможно, вы захотите добавить прокрутку переполнения, чтобы прокрутить в пределах контейнера, чтобы увидеть ваши расширенные данные, или использовать что-то вроде css flex с минимальной высотой, чтобы развернуть контейнер, чтобы увидеть ваши данные read more