title: How can I click to slide open divs in multiple instances independently of one another?
body: <p>I have the following markup, below. Essentially, they are the same type of section with a heading, and some of them will have a panel that's initially invisible but will open when you click js-toggle. Not every .article will have the panels and triggers, and also some of them will have an external link.</p>
  <p>I'm trying to make it so that when you click .js-toggle, only the panel in that .article will open and close, and the toggle element will have an .open class toggled. Opening one panel should not close panels in other articles.</p>
  <pre><code>&lt;div class=&quot;article&quot;&gt;
    &lt;h2&gt;Title here&lt;/h2&gt;
    &lt;p&gt;&lt;span class=&quot;js-toggle&quot;&gt;Open panel&lt;/span&gt;&lt;a href=&quot;external link&quot;&gt;Click me&lt;/a&gt;&lt;/p&gt;
    &lt;div class=&quot;panel&quot;&gt;Some text here&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;article&quot;&gt;
    &lt;h2&gt;Title here&lt;/h2&gt;
    &lt;a href=&quot;external link&quot;&gt;Click me&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;article&quot;&gt;
    &lt;h2&gt;Title here&lt;/h2&gt;
    &lt;p&gt;&lt;span class=&quot;js-toggle&quot;&gt;Open panel&lt;/span&gt;&lt;a href=&quot;external link&quot;&gt;Click me&lt;/a&gt;&lt;/p&gt;
    &lt;div class=&quot;panel&quot;&gt;Some text here&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>All my attempts so far have resulted in it either opening all the panels at once when you click one, or it only works in the first instance, or they work but then if one article doesn't have a sliding panel, then the following ones break.</p>
  <p>I tried this both in vanilla js (which is preferable) as well as jquery (with slideToggle), but no luck. Any help would be greatly appreciated!</p>