Question

Can someone please tell me why this doesn’t work? I’m trying to show and hide content.

Here is my markup

<div class="entry">
  <p class="posted">
    test<br />
    <a href="#" class="toggle" title="Show Comments">
      Show/Hide
    </a>
  </p>
  <div class="box" class="comment">
    test hidden comment
  </div>
</div>

---

$(function () {
  $('div.box').hide();
  $('a.toggle').click(function () {
    $(this).parents('.entry').next('div.box').toggle(400);
  });
});

The way this example sits right now, If I take the last closing div and move it up after the closing p tag, it works fine but shows and hides all hidden content (divs) which is not what I’m after. I’d only like to show the content that is associated with each link.

Answer 1

try use .parent instead of .parents.

this will work:

    $(function() {
        $('div.box').hide();
        $('a.toggle').click(function() {
        $(this).parent('.posted').next('div.box').toggle(400);
        });
    });