Javascript 单击时如何使用js隐藏可折叠元素

我在我的项目中使用了w3school可折叠示例。我是java脚本新手。我的项目工作正常，但当我单击一个部分时，其他部分没有关闭。如果我单击一个部分，它将如何关闭，其他可折叠窗口将关闭。我需要修改此功能，但我不能使用其他引导示例，因为我有一些限制。我还需要在左侧添加一个图像，当它被点击时，它将被改变

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

。可折叠{
背景色：#777；
颜色：白色；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
}
.活动，.可折叠：悬停{
背景色：#555；
}
.可折叠：之后{
内容：“\002B”；
颜色：白色；
字体大小：粗体；
浮动：对；
左边距：5px；
}
.活动：之后{
内容：“\2212”；
}
.内容{
填充：0 18px；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
背景色：#f1f1；
}

打开第2节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

开放式第3节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

使用此选项应该可以完成工作

var coll = document.getElementsByClassName("collapsible");

for (var i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    // before opening the accordion, you close everything
    for (var j = 0; j < coll.length; j++) {
      coll[j].classList.remove("active");
      coll[j].nextElementSibling.style.maxHeight = null;
    }
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}

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

如果我这样做，那么当我想通过单击任何部分来关闭它们时，它只会打开全部和第二次，而不会关闭。但当我第二次点击任何部分时，它需要关闭。