Akkordeon-Panel überlappt auf einem zu vorher öffnen (zweite) Panel

Question

Ich habe Akkordeon auf meiner Website hier https://www.freemakermedia.com/work-with-me/ hier hinzugefügt können Sie sehen, "DONE-FOR-YOU WEBSITE" und "WEEKEND WEBSITE WARRIOR" zwei Akkordeonfelder hinzugefügt und durch Drücken Auf diesen ist das Panel offen, alles funktioniert gut. Aber mein Problem ist, dass die Paneele sich überlappen, sobald ein Paneel geöffnet wird, um das offene Paneel zu überlappen.

Ich möchte zuvor geöffneten Panel ausblenden, damit sie sich nicht überlappen. Ich habe verschiedene Lösungen ausprobiert, um das zuvor geöffnete Panel auszublenden, wenn ich auf das zweite Akkordeonfeld klicke, aber kein Glück. Unten ist mein JS-Code.

 //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"; 
     } 
    } 
    } 

Answer 1

In Ihrer Funktion vor this.classList.toggle("active"); Sie jedes Akkordeon mit einem for-Schleife zurückgesetzt könnten nicht aktiv sein. Oder alles in einem for-Schleife verbindet jede andere Platte und führen Sie den Knebel nur auf dem angeklickt man zu verbergen:

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); 
     } 
    } 
}