手风琴彼此隐藏的内容

Question

我正在尝试使用一些手风琴放置菜单。我遵循了w3Schools教程。看来，我遇到的唯一问题是手风琴彼此隐藏了内容。这里是我所做的以及结果如何：

现在，单击第一部分手风琴，这里是结果

您可以看到第二手风琴保持固定，这隐藏了第一菜单的导入部分！

有人知道如何解决这个问题吗？

const menu = document.querySelectorAll('.menu a');


menu.forEach(function(menu) {
    menu.addEventListener('focus', function() {

      // I tired replace this jquery into vanilla javascript
      jQuery(this).closest('ul').find('.visible').removeClass('visible');


      // Works
      const next = mainMenuLink.nextElementSibling;

      if (next) {
        next .classList.add('visible');
      }

    });
  });

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });

}

function openFunctionality(evt, funName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(funName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

* {
  box-sizing: border-box;
}

body {
  font-family: Calibri;
  font-size: 24px;
  font-style: normal;
  font-variant: normal;
  font-weight: 100;
  line-height: 26.4px;
}

@media only screen and (max-width:800px) {
  /* For tablets: */
  .main {
    width: 80%;
    padding: 0;
  }
  .right {
    width: 100%;
  }
}

@media only screen and (max-width:500px) {
  /* For mobile phones: */
  .menu,
  .main,
  .right {
    width: 100%;
  }
}

body {
  background-color: rgb(210, 219, 209);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: right bottom, 50% 50%;
  background-size: auto, cover;
}


/* Style the tab */

.tab {
  float: left;
  overflow: hidden;
  border: none;
  background-color: rgb(27, 85, 44, 0);
}


/* Style the buttons inside the tab */

.tab button {
  display: block;
  background-color: rgb(27, 85, 44, 0);
  text-align: left;
  color: rgb(255, 255, 255);
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}


/* Change background color of buttons on hover */

.tab button:hover {
  background-color: rgb(39, 87, 55);
}


/* Create an active/current tablink class */

.tab button.active {
  background-color: rgb(7, 95, 29);
}


/* Style the tab content */

.tabcontent {
  float: left;
  padding: 0px 0px;
  /*border: 0 solid #ccc;*/
  width: 70%;
  border-left: none;
  height: 0spx;
  margin-bottom: -20px
}

.accordion {
  background-color: rgb(5, 24, 7);
  color: rgb(255, 255, 255);
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: middle;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active,
.accordion:hover {
  background-color: rgb(0, 77, 165);
}

.panel {
  padding: 0 18px;
  background-color: rgb(0, 0, 0, 0);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}


/*On Off slider*/

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: rgb(7, 95, 29);
}

input:focus+.slider {
  box-shadow: 0 0 1px rgb(7, 95, 29);
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}