title: jQuery get parent sibling for this element only
body: <p>I cant figure out how to write this.</p>
  
  <p>See my mark up structure, which is repeated multiple times on a page.</p>
  
  <pre><code>&lt;div class="module"&gt;    
      &lt;div class="archive-info"&gt;
          &lt;span class="archive-meta"&gt;
              open
          &lt;/span&gt;                         
      &lt;/div&gt;
      &lt;div class="archive-meta-slide"&gt;
      &lt;/div&gt;                              
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see inside my mark-up, I have a <code>&lt;span&gt;</code> which is my <code>$metaButton</code> - when this is clicked, it runs the animation on the <code>div.archive-meta-slide</code> - this is simple enough, but I'm trying to run the animation only on the current <code>div.module</code> it animates all the divs with the class <code>"archive-meta-slide"</code>, and I'm really struggling to animate only the current <code>div.archive-meta-slide</code> using <code>this</code></p>
  
  <p>It would be easy if the <code>div.archive-meta-slide</code> was inside the parent div of <code>$metaButton</code>, but because it's outside this parent div, I can't get the traversing right.</p>
  
  <p>See my script</p>
  
  <pre><code>var $metaButton = $("span.archive-meta"),
      $metaSlide = $(".archive-meta-slide");
  
  $metaButton.toggle(
  function() {
      $(this).parent().siblings().find(".archive-meta-slide").animate({ height: "0" }, 300);
      $(this).parent().siblings().find(".archive-meta-slide").html("close");
  },
  function() {
      $(this).parent().siblings().find(".archive-meta-slide").animate({ height: "43px" }, 300);
      $(this).parent().siblings().find(".archive-meta-slide").html("open");
  });
  </code></pre>
  
  <p>Can anyone help?</p>
  
  <p>Thanks
  Josh</p>