title: Why is my accordion not showing the sub tabs when it is clicked on?
body: <p>I am trying to create a FAQ accordion but unfortunately when one of the tabs open there is just a space, and nothing shows up. Here is my html, CSS, and JavaScript that I am working with. Any help would be greatly appreciated. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var acc = document.getElementsByClassName("accordion");
  var panel = document.getElementsByClassName('panel');
  
  for (var i = 0; i &lt; 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 &lt; els.length; i++) {
      els[i].classList[fnName](className);
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="master-accordion"&gt;
  
    &lt;button class="accordion"&gt;HOW DO I CANCEL MY RENTED SPACE?&lt;/button&gt;
    &lt;div class="panel"&gt;
      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.
    &lt;/div&gt;
  
    &lt;button class="accordion"&gt;DO YOU HAVE ANY COVERED PARKING SPACES?&lt;/button&gt;
    &lt;div class="panel"&gt;
      No, unfortunately not at this time
    &lt;/div&gt;
  
    &lt;button class="accordion"&gt;ARE THERE ANY DISCOUNTS FOR LONG TERM RENTING?&lt;/button&gt;
    &lt;div class="panel"&gt;
      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.
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When i click on the button they will open but when they do there is a dead space, most likely due to my margin that i placed on it. The over all function of my JavaScript works but I am unable to see the text which leads me to believe this is a CSS problem. </p>