Javascript 手风琴面板重叠在选择一个之前打开（第二个）面板上

我已经在我的网站上添加了手风琴，在这里你可以看到“为你做的网站”和“周末网站战士”两个手风琴字段添加，通过按下这些字段，面板打开，一切正常。但我的问题是，一旦打开一个面板，面板的重叠部分就会与打开的面板重叠

我想隐藏以前打开的面板，这样它们就不会相互重叠。我尝试了不同的解决方案，当点击第二个手风琴场时，隐藏先前打开的面板，但运气不好。下面是我的JS代码

        //Js file for accordian

var acc = document.getElementsByClassName("accordian-left");
var i;
for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight){
            panel.style.maxHeight = null;
            panel.style.zIndex = "0";
            panel.style.border = "0";
            } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
        jQuery(this).css('margin-bottom','10px');
        panel.style.zIndex = "1";
        panel.style.border = "3px solid #eee";
        } 
     }
  }

//手风琴的Js文件
var acc=document.getElementsByClassName（“手风琴式左”）；
var i；
对于（i=0；i
此.classList.toggle（“活动”）之前的函数中的你可以用for循环将每个手风琴重置为非活动状态。
或者在for循环中组合所有内容以隐藏其他面板，并仅在单击的面板上运行切换：

function showPanel(panel) {
    panel.style.maxHeight = panel.scrollHeight + "px";
    jQuery(this).css('margin-bottom','10px');
    panel.style.zIndex = "1";
    panel.style.border = "3px solid #eee";
}

function hidePanel(panel) {
    panel.style.maxHeight = null;
    panel.style.zIndex = "0";
    panel.style.border = "0";
}

function togglePanel(panel) {
    if (panel.style.maxHeight){
        hidePanel(panel);
    } else {
        showPanel(panel);
    }
}

var acc = document.getElementsByClassName("accordian-left");
var i;
for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
        var hideAnim = false;
        for (j = 0; j < acc.length; j++) {
            if (this != acc[j] && acc[j].classList.contains("active")) {
                acc[j].classList.remove("active");
                hidePanel(acc[j].nextElementSibling);
                hideAnim = true;
            }
        }
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (hideAnim) {
            setTimeout(function() {
              togglePanel(panel);
            }, 400);
        } else {
            togglePanel(panel);
        }
    }
}

功能显示面板（面板）{
panel.style.maxHeight=panel.scrollHeight+“px”；
jQuery（this.css（'margin-bottom'，'10px'）；
panel.style.zIndex=“1”；
panel.style.border=“3px solid#eee”；
}
功能隐藏面板（面板）{
panel.style.maxHeight=null；
panel.style.zIndex=“0”；
panel.style.border=“0”；
}
功能切换面板（面板）{
if（panel.style.maxHeight）{
hidePanel（专家组）；
}否则{
显示面板（面板）；
}
}
var acc=document.getElementsByClassName（“手风琴式左”）；
var i；
对于（i=0；i
此.classList.toggle（“活动”）之前的函数中的你可以用for循环将每个手风琴重置为非活动状态。
或者在for循环中组合所有内容以隐藏其他面板，并仅在单击的面板上运行切换：

function showPanel(panel) {
    panel.style.maxHeight = panel.scrollHeight + "px";
    jQuery(this).css('margin-bottom','10px');
    panel.style.zIndex = "1";
    panel.style.border = "3px solid #eee";
}

function hidePanel(panel) {
    panel.style.maxHeight = null;
    panel.style.zIndex = "0";
    panel.style.border = "0";
}

function togglePanel(panel) {
    if (panel.style.maxHeight){
        hidePanel(panel);
    } else {
        showPanel(panel);
    }
}

var acc = document.getElementsByClassName("accordian-left");
var i;
for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
        var hideAnim = false;
        for (j = 0; j < acc.length; j++) {
            if (this != acc[j] && acc[j].classList.contains("active")) {
                acc[j].classList.remove("active");
                hidePanel(acc[j].nextElementSibling);
                hideAnim = true;
            }
        }
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (hideAnim) {
            setTimeout(function() {
              togglePanel(panel);
            }, 400);
        } else {
            togglePanel(panel);
        }
    }
}

功能显示面板（面板）{
panel.style.maxHeight=panel.scrollHeight+“px”；
jQuery（this.css（'margin-bottom'，'10px'）；
panel.style.zIndex=“1”；
panel.style.border=“3px solid#eee”；
}
功能隐藏面板（面板）{
panel.style.maxHeight=null；
panel.style.zIndex=“0”；
panel.style.border=“0”；
}
功能切换面板（面板）{
if（panel.style.maxHeight）{
hidePanel（专家组）；
}否则{
显示面板（面板）；
}
}
var acc=document.getElementsByClassName（“手风琴式左”）；
var i；
对于（i=0；i
可以，但现在切换隐藏/显示不起作用working@Barjinder我省略了if，继续for循环。编辑了我的答案，请再次核对。谢谢@David。它工作得非常好。我们可以在打开和隐藏面板时添加一点动画效果，还是可以在打开面板时稍微慢一点？当然，我再次编辑了它。添加了一个新的togglePanel函数，可以调用该函数进行切换。还添加了setTimeout，它在第二个参数之后执行第一个函数参数（以毫秒为单位）。目前是400。您可以根据自己的喜好对其进行微调。是的，它工作正常，但现在切换“隐藏/显示”按钮不起作用working@Barjinder我省略了if，继续for循环。编辑了我的答案，请再次核对。谢谢@David。它工作得非常好。我们可以在打开和隐藏面板时添加一点动画效果，还是可以在打开面板时稍微慢一点？当然，我再次编辑了它。添加了一个新的togglePanel函数，可以调用该函数进行切换。还添加了setTimeout，它在第二个参数之后执行第一个函数参数（以毫秒为单位）。目前是400。你可以根据自己的喜好对它进行微调。