title: Target a specific indirect parent class
body: <p>I've 2 (or more) divs called <code>hidden_block</code>. I cannot change the HTML and I have to use jQuery, even though I've just started to learn javascript but I don't have any choice on this one. </p>
  
  <p>I'd like that when you click on <code>slider_head</code> the <code>hidden_content</code> block just below gets displayed but only the <code>hidden_content</code> from the involved <code>hidden_block</code> div.</p>
  
  <p>My codepen and html/jquery code:
  <a href="https://codepen.io/HollowKnight/pen/bOEzay" rel="nofollow noreferrer">https://codepen.io/HollowKnight/pen/bOEzay</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function slideBlock() {
    $('.hidden_content').hide();
    $('.slider_head').on("click", function() {
      var sliderhead = $(this);
      var hiddenblock = $(sliderhead).parent();
      if ((hiddenblock &gt; '.hidden_content').is(':hidden')) {
        $(hiddenblock &gt; '.hidden_content').slideDown(500);
      } else {
        $(hiddenblock &gt; '.hidden_content').slideUp(1000);
      }
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="hidden_block"&gt;
    &lt;span class="slider_head"&gt;PARTIE 1 TEST&lt;/span&gt;
    &lt;div class="hidden_content"&gt;
      &lt;p&gt;test test test&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="hidden_block"&gt;
    &lt;span class="slider_head"&gt;PARTIE 2&lt;/span&gt;
    &lt;div class="hidden_content"&gt;
      &lt;p&gt;test2 test2 test2&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>