title: Simple Accordion Targeting
body: <p>I am having an issue with figuring out how to target a certain item in my website design using JavaScript.</p>
  
  <p>I am creating a simple accordion:</p>
  
  <pre><code>    $(function($) {
          var allPanels = $('.accordion &gt; dd').hide();
          $('.accordion &gt; dd:nth-child(2)').show();
          $('.accordion &gt; dt &gt; a').on('click', function() {
              allPanels.slideUp('fast');
              $(this).parent().next().slideDown('fast');
          return false;
          });
      });
  </code></pre>
  
  <p>What I would prefer to do is, instead of telling the ".next()" to slide down, i want to target one of my tags "4 tags away," much like an nth child, but by measuring from the clicked tag. This is my html code, to clarify:</p>
  
  <pre><code>    &lt;dl class="accordion"&gt;
          &lt;dt&gt;&lt;a href=""&gt;Linked element 1&lt;/a&gt;&lt;/dt&gt;
          &lt;dt&gt;&lt;a href=""&gt;Linked element 2&lt;/a&gt;&lt;/dt&gt;
          &lt;dt&gt;&lt;a href=""&gt;Linked element 3&lt;/a&gt;&lt;/dt&gt;
          &lt;dt&gt;&lt;a href=""&gt;Linked element 4&lt;/a&gt;&lt;/dt&gt;
          &lt;dd&gt;Linked element 1 - dropdown content&lt;/dd&gt;
          &lt;dd&gt;Linked element 2 - dropdown content&lt;/dd&gt;
          &lt;dd&gt;Linked element 3 - dropdown content&lt;/dd&gt;
          &lt;dd&gt;Linked element 4 - dropdown content&lt;/dd&gt;
      &lt;/dl&gt;
  </code></pre>