title: Prevent active accordion item from closing on click
body: <p>i'm working on a design for a site, but i'm super new to any kind of coding, so there's a lot that i don't know the answer to (and haven't been able to find yet).</p>
  <p>currently, i'd like to know if it's possible, with the code i currently have, to prevent the active accordion item/panel from closing when the header is clicked.</p>
  <p>here's the relevant part of my current 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("accordionHeader");
  var panel = document.getElementsByClassName('accPanel');
  
  for (var i = 0; i &lt; acc.length; i++) {
    acc[i].onclick = function() {
      var setClasses = !this.classList.contains('open');
      setClass(acc, 'open', 'remove');
      setClass(panel, 'open', 'remove');
      if (setClasses) {
        this.classList.toggle("open");
        this.nextElementSibling.classList.toggle("open");
      }
    }
  }
  
  function setClass(els, className, fnName) {
    for (var i = 0; i &lt; els.length; i++) {
      els[i].classList[fnName](className);
    }
  }
  document.getElementById("defaultOpen").click();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.accordionHeader {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
  }
  
  .accPanel {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
  }
  
  .open {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;polka time&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div&gt;
      &lt;button class="accordionHeader" id="defaultOpen"&gt;section 1&lt;/button&gt;
      &lt;div class="accPanel"&gt;
        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
        animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
        est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
        voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
      &lt;/div&gt;
  
      &lt;button class="accordionHeader"&gt;section 2&lt;/button&gt;
      &lt;div class="accPanel"&gt;
        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
        animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
        est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
        voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
      &lt;/div&gt;
      &lt;button class="accordionHeader"&gt;section 3&lt;/button&gt;
      &lt;div class="accPanel"&gt;
        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
        animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
        est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
        voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;script src="character page js.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>if at all possible i'd like to not change <em>too</em> much about the code, since i only just got it working (more or less). i'm sure my code's a total mess though since i've mainly been copying off tutorials the whole time.</p>
  <p>also if there's a good way to get the accordion to animate that would be a bonus.</p>