title: “How to fix the 'div panel' in either CSS or JavaScript from closing
body: <p>This is regarding a FAQ-page;</p>
  
  <p>I've tested some code, when one <em>div</em> is active it doesn't automatically close when I click on another <em>div</em>, I do have - and + signs but when a user goes to another <code>.div</code> tab the previous one needs to be closed automatically;</p>
  
  <p>I've tried adding a lot of CSS code but I think, that they get overwritten with the JavaScript, I have not made the JavaScript, but tried to debug it and simply my knowledge is really basic compared to HTML and CSS, been troubleshooting this for two days now, thanks in advance! </p>
  
  <p>Below is the code:</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 i;
  
                  for (i = 0; i &lt; acc.length; i++) {
                      acc[i].onclick = function () {
                          this.classList.toggle("active");
                          var panel = this.nextElementSibling;
                          if (panel.style.maxHeight) {
                              panel.style.maxHeight = null;
                          } else {
                              panel.style.maxHeight = panel.scrollHeight + "px";
                          }
                      }
                  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>     button.accordion {
                      background-color: #eee;
                      color: #444;
                      cursor: pointer;
                      padding: 18px;
                      width: 100%;
                      border: none;
                      text-align: left;
                      outline: none;
                      font-size: 17px;
                      transition: 0.4s;
                  }
  
                  button.accordion.active,
                  button.accordion:hover {
                      background-color: #ccc;
                  }
  
                  button.accordion:after {
  
                      content: '\002B';
                      color: #777;
                      font-weight: bold;
                      float: right;
                      margin-left: 10px;
                  }
  
                  button.accordion.active:after {
                      content: "\2212";
                  }
  
                  div.panel {
                      padding: 0 18px;
                      background-color: white;
                      max-height: 0;
                      overflow: hidden;
                      transition: max-height 0.2s ease-out;
                  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="page-width"&gt;
    &lt;div class="grid"&gt;
      &lt;div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth"&gt;
        &lt;div class="section-header text-center"&gt;
          &lt;h1&gt;Title&lt;/h1&gt;
        &lt;/div&gt;
  
        &lt;div class="rte"&gt;
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse nobis natus, laboriosam, aperiam alias enim, atque accusantium autem saepe id molestiae animi! Soluta laudantium eaque aspernatur maxime et aut, consequuntur.
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>