Javascript 可折叠不工作[包括JSFIDLE演示]

我试图让这个可折叠的功能正常运行，在加载页面时显示第一组信息，在用户按下“阅读更多”时使其消失，并显示新信息

<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> 

var coll=document.getElementsByClassName（“可折叠”）；
var i；
对于（i=0；i

您正在将onclick=display（）附加到所有列表元素。GetElementById将返回具有给定id的第一个元素，在本例中，它始终以您的第一个封面为目标（如果您在脚本的其他地方触发了该封面）。因此，由于每个“read more”列表元素都有调用display（）的onclick函数，因此它总是命中第一个元素（因为它是具有相应id的第一个元素）。您可以在事件中传递什么，然后在那里使用并传递id（如果您的意图是隐藏图像）。如果没有，您可以删除onclick上的display（）

---

其他元素按预期工作，但您看不到它，因为封闭容器上的css正在隐藏它（如果检查检查器，您将注意到css设置为预期）。您可能希望添加一个溢出滚动条，以便在容器限制内滚动以查看扩展的数据，或者使用css flex之类的最小高度来扩展容器以查看“.products”css中的“读取更多数据”

，如果高度设置为350，请将其更改为最小高度：350，之后，当您单击“阅读更多”时，您的容器将展开以适应新内容