为什么我的手风琴在点击时没有显示子标签？

Question

我正在尝试创建一个常见问题手风琴，但不幸的是，当其中一个标签打开时，只有一个空格，没有任何显示。这是我正在使用的html，CSS和JavaScript。任何帮助将不胜感激。

var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');

for (var i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    var setClasses = !this.classList.contains('active');
    setClass(acc, 'active', 'remove');
    setClass(panel, 'show', 'remove');

    if (setClasses) {
      this.classList.toggle("active");
      this.nextElementSibling.classList.toggle("show");
    }
  }
}

function setClass(els, className, fnName) {
  for (var i = 0; i < els.length; i++) {
    els[i].classList[fnName](className);
  }
}

.master-accordion {
  color: #141452;
  width: 100%;
  height: 80%;
  padding: 0 0 0 8em;
  position: relative;
  z-index: 99;
  align-items: center;
  opacity: .9;
}

.accordion {
  color: #141452;
  font-weight: bold;
  cursor: pointer;
  padding: 18px;
  width: 90%;
  opacity: .95;
  text-align: left;
  border: 1px solid black;
  transition: 0.4s;
  font-family: 'Roboto', sans-serif;
  z-index: 99;
}

.panel {
  background-color: white;
  display: none;
  overflow: hidden;
  width: 90%;
  max-height: 0;
  transition: max-height 0.2s ease-out;
  position: relative;
  z-index: 99;
  font: 16px;
  background-color: white;
  padding: 10px 0 0 0;
}

.active,
.accordion:hover {
  background-color: #141452;
  color: white;
}

.accordion::after {
  content: '\02795';
  font-size: 15px;
  float: right;
  margin-left: 5px;
}

.active::after {
  content: '\2796'
}

.accordion.active {
  margin-bottom: 20px;
}

<div class="master-accordion">

  <button class="accordion">HOW DO I CANCEL MY RENTED SPACE?</button>
  <div class="panel">
    If you wish to cancel your space, simply use the email contact form below to send us an email with your intent to cancel. We require 7 days notice before the end of the month in order to not be charged for an additional months rent.
  </div>

  <button class="accordion">DO YOU HAVE ANY COVERED PARKING SPACES?</button>
  <div class="panel">
    No, unfortunately not at this time
  </div>

  <button class="accordion">ARE THERE ANY DISCOUNTS FOR LONG TERM RENTING?</button>
  <div class="panel">
    Yes, you can signup and pay for a year ahead of time and receive the first month free. We are happy to discuss any longer terms, if you would like.
  </div>

</div>

当我点击按钮时它们会打开，但是当它们出现时会有一个死角，很可能是因为我放在它上面的余量。我的JavaScript的所有功能都有效但我无法看到让我相信这是一个CSS问题的文本。

Answer 1

您尚未为show类设置任何属性。我删除了display:none并为max-height:150px类设置了show。

var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');

for (var i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    var setClasses = !this.classList.contains('active');
    setClass(acc, 'active', 'remove');
    setClass(panel, 'show', 'remove');

    if (setClasses) {
      this.classList.toggle("active");
      this.nextElementSibling.classList.toggle("show");
    }
  }
}

function setClass(els, className, fnName) {
  for (var i = 0; i < els.length; i++) {
    els[i].classList[fnName](className);
  }
}

.master-accordion {
  color: #141452;
  width: 100%;
  height: 80%;
  padding: 0 0 0 8em;
  position: relative;
  z-index: 99;
  align-items: center;
  opacity: .9;
}

.accordion {
  color: #141452;
  font-weight: bold;
  cursor: pointer;
  padding: 18px;
  width: 90%;
  opacity: .95;
  text-align: left;
  border: 1px solid black;
  transition: 0.4s;
  font-family: 'Roboto', sans-serif;
  z-index: 99;
}

.panel {
  background-color: white;
  overflow: hidden;
  width: 90%;
  max-height: 0;
  transition: max-height 0.2s ease-out;
  position: relative;
  z-index: 99;
  font: 16px;
  background-color: white;
  padding: 10px 0 0 0;
}

.panel.show{
max-height: 150px;
}

.active,
.accordion:hover {
  background-color: #141452;
  color: white;
}

.accordion::after {
  content: '\02795';
  font-size: 15px;
  float: right;
  margin-left: 5px;
}

.active::after {
  content: '\2796'
}

.accordion.active {
  margin-bottom: 20px;
}

<div class="master-accordion">

  <button class="accordion">HOW DO I CANCEL MY RENTED SPACE?</button>
  <div class="panel">
    If you wish to cancel your space, simply use the email contact form below to send us an email with your intent to cancel. We require 7 days notice before the end of the month in order to not be charged for an additional months rent.
  </div>

  <button class="accordion">DO YOU HAVE ANY COVERED PARKING SPACES?</button>
  <div class="panel">
    No, unfortunately not at this time
  </div>

  <button class="accordion">ARE THERE ANY DISCOUNTS FOR LONG TERM RENTING?</button>
  <div class="panel">
    Yes, you can signup and pay for a year ahead of time and receive the first month free. We are happy to discuss any longer terms, if you would like.
  </div>

</div>