Javascript 如何在第二次点击时关闭手风琴？（仅限css和JS）

我有一个简单的手风琴，当点击一个新面板时，它会关闭当前面板。这正是我想要的

但是，我希望能够通过再次单击来关闭当前打开的面板。要做到这一点，我需要向代码中添加什么

没有jQuery，请：）

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i

。手风琴：之后{
内容：“\002B”；
}
.扩大：之后{
内容：“\2212”；
}
.小组{
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
}

文本1
文本2
文本3
文本4

请尝试以下操作：

var acc = document.getElementsByClassName("accordion");
        var i;      
        for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function() {
        var elems = document.getElementsByClassName("accordion");
        var setClasses = !this.classList.contains('expanded');
        for(var it of elems) {
            console.log(it);
          it.classList.remove("expanded");
          it.nextElementSibling.style.maxHeight = null;
        }       
        if (setClasses) {
            this.classList.toggle("expanded");
            var panel = this.nextElementSibling;
            panel.style.maxHeight = panel.scrollHeight + "px";
        }       
        });

        }

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i

这里是一个非常简短的实现，减少代码量可以更好地监督代码

var acc=document.getElementsByClassName（“accordion”）；
功能切换（el）{
设nextElement=el.nextElementSibling；
nextElement.className=='panel'？nextElement.className=''：nextElement.className='panel'；
}

。手风琴：之后{
内容：“\002B”；
}
.扩大：之后{
内容：“\2212”；
}
.小组{
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
}

文本1
文本2
文本3
文本4

您可以在click函数中使用click计数器变量，如果click为奇数，则会发生切换，如果click为偶数，则会删除扩展类感谢您的贡献！但是，切换函数需要jQuery，对吗？我只想用vanilla JS和CSS来做这件事。忽略我之前的评论，我没有看HTML代码。我看到您没有使用jQuery切换：）