title: classList.add works but toggle doesn't
body: <p>My HTML</p>
  
  <pre><code>&lt;div class="chapter"&gt;text text text &lt;/div&gt;
  &lt;div class="chapter"&gt;text text text &lt;/div&gt;
  &lt;button id="button"&gt;button&lt;/button&gt;
  </code></pre>
  
  <p>My js</p>
  
  <pre><code>var button = document.querySelector('#button');
  var chapter = document.querySelectorAll('.chapter');
  for(var i = 0; i &lt; chapter.length; i++){
  button.addEventListener('click', function(){
  
  for(var i = 0; i &lt; chapter.length; i++) {
  chapter[i].classList.add('active');
  }
  });
  }
  </code></pre>
  
  <p>This adds the class of "active" on clicking the button.</p>
  
  <p>But toggle doesn't work.  Instead of </p>
  
  <pre><code>chapter[i].classList.add('active');
  </code></pre>
  
  <p>When I do,</p>
  
  <pre><code>chapter[i].classList.toggle('active');
  </code></pre>
  
  <p>the class of "active" does not toggle.  console shows no error.</p>
  
  <p>So I tried to check the class of "active" first &amp; remove the class if the class exists.  I know I was trying to reinvent the toggle function; as stated above, toggle wasn't working so I tried it anyway.</p>
  
  <pre><code>if (chapter[i].contains('active')){
  chapter[i].classList.remove('active');  
  </code></pre>
  
  <p>And I got a slew of error messages.  This is as far as I got.  I somehow felt that this wasn't going to work but just tried it anyway.</p>
  
  <p>I am stumped.</p>
  
  <p>Can anyone point out why classList.toggle isn't working in my code &amp; how this can be fixed?</p>
  
  <p>Thanks.</p>