title: Accordion inside a form auto submits
body: <p>So disclaimer, I already found the answer to this but I'm posting it as a question in case it helps somebody else.</p>
  
  <p>Scenario: Inside a form in the page you have a couple of accordions so that the user can collapse the parts they already looked at. If you follow most examples expanding the accordions will actually auto submit the form, no bueno.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  .accordion {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
      transition: 0.4s;
  }
  
  .active, .accordion:hover {
      background-color: #ccc; 
  }
  
  .panel {
      padding: 0 18px;
      display: none;
      background-color: white;
      overflow: hidden;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h2&gt;Accordion&lt;/h2&gt;
  
  &lt;form action="fail" method="post" enctype="multipart/form-data"&gt;
  
  &lt;button class="accordion"&gt;Section 1&lt;/button&gt;
  &lt;div class="panel"&gt;
    &lt;input type="checkbox" name="checkbox1.1"&gt;Checkbox 1.1
    &lt;br&gt;
    &lt;input type="checkbox" name="checkbox1.2"&gt;Checkbox 1.2
  &lt;/div&gt;
  
  &lt;button class="accordion"&gt;Section 2&lt;/button&gt;
  &lt;div class="panel"&gt;
    &lt;input type="checkbox" name="checkbox2.1"&gt;Checkbox 1.1
    &lt;br&gt;
    &lt;input type="checkbox" name="checkbox2.2"&gt;Checkbox 1.2
  &lt;/div&gt;
  &lt;input type="submit" value="Submit"&gt;
  &lt;/form&gt;
  
  &lt;script&gt;
  var acc = document.getElementsByClassName("accordion");
  var i;
  
  for (i = 0; i &lt; acc.length; i++) {
      acc[i].addEventListener("click", function() {
          this.classList.toggle("active");
          var panel = this.nextElementSibling;
          if (panel.style.display === "block") {
              panel.style.display = "none";
          } else {
              panel.style.display = "block";
          }
      });
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>