title: jQuery slideToggle() not working?
body: <p>I'm trying to make a div (.panel divs) appear or disappear when the div right above that one (.accordion divs) is clicked.</p>
  
  <p>I've tryed several variatons for the jQuery code but none have worked for me.</p>
  
  <p>I know I'm doing something wrong but can't find what, so this is what I have so far:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="accordion"&gt;Section 4&lt;/div&gt;
  &lt;div class="panel"&gt;
      &lt;p&gt;Lorem ipsum...&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="accordion"&gt;Section 5&lt;/div&gt;
  &lt;div class="panel"&gt;
      &lt;p&gt;Lorem ipsum...&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="accordion"&gt;Section 6&lt;/div&gt;
  &lt;div class="panel"&gt;
      &lt;p&gt;Lorem ipsum...&lt;/p&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.panel {
      display: block;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var acc = document.getElementsByClassName("accordion");
  $(".panel").hide();
  
  for (var i = 0; i &lt; acc.length; i++) {
      acc[i].addEventListener("click", function() {
          console.log("test");
          $(this).next(".panel").slideToggle();
      });
  } 
  </code></pre>
  
  <p>With what I have so far I can hide the <code>.panel</code> divs, and the <code>test</code> console log prints correctly, but once I click on the correspondig <code>.accordion</code> div, I get the following error message: </p>
  
  <blockquote>
    <p>TypeError: $(...).next(...).slideToggle is not a function</p>
  </blockquote>