同一时间只能打开一个可折叠

Question

请注意：一周前开始学习Javascript，请问我的知识不足。

我正在关注以下教程：

https://www.w3schools.com/howto/howto_js_collapsible.asp

我还没有接触过JS，但是我已经在4行代码中实现了这一点，该代码在移动设备上堆叠为2行2行。

从上面的屏幕截图中可以看到，如果我打开一个可折叠组件，则所有这些组件都会打开，并在所有4个项目下面创建一个空格。

有没有办法将其限制为一次只能打开一次？

我尝试复制第一行和第二行的脚本和CSS，并将它们命名为collapsible2等，这是行不通的。

我已经看过这里了，本教程没有特定内容，只有一个开放空间。

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.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}

我只想一次打开一个可折叠的门，或者限制为一排。

如果有人可以帮助JS，将不胜感激！预先感谢。