title: Javascript classList.toggle not removing class
body: <p>I'm trying to toggle the class "open" so that my accordion would close when clicking on the same button. They close fine when clicking on another button but not when clicking on itself. This needs to be done in Javascript and not jQuery. Please view in mobile as that is where the issue is:</p>
  
  <p>Here is my JSFiddle link: <a href="https://jsfiddle.net/pwouns7o/1/" rel="nofollow noreferrer">https://jsfiddle.net/pwouns7o/1/</a></p>
  
  <p>And here is my Javascript code:</p>
  
  <pre><code>var accordion = document.getElementsByClassName("accordion");
  var panel = document.getElementsByClassName("panel");
  
  for(var i = 0; i &lt; accordion.length; i++){
    accordion[i].addEventListener('click', function(){
      removeOpen();
      // add active class to clicked element and open class to next slibling
      this.nextElementSibling.classList.toggle('open');
      this.classList.toggle('active');
    });
  };
  
  function removeOpen (){
   // remove open class for all elements
      for(var i = 0; i &lt; panel.length; i++) {
         panel[i].classList.remove('open');
      }
  };
  </code></pre>
  
  <p>I'm not sure what I'm doing wrong? </p>