Question

I am having problems trying to toggle between two <p> tags in JQuery, I have a markup which looks like…

<td>
   <p>paragraph 1 <a class="descriptionToggle">Click</a></p>
   <p style="display:none;">paragraph 2 <a class="descriptionToggle">Click</a</p>
</td>

<td>
   <p>paragraph 1 <a class="descriptionToggle">Click</a></p>
   <p style="display:none;">paragraph 2 <a class="descriptionToggle">Click</a</p>
</td>

Every time the .descriptionToggle link is clicked it should toggle between neighbouring <p> tags, I have tried the following… but it does not work…

$("a.descriptionToggle").on("click",function(){
   $(this).parent().parent().("p").toggle();
});

How do I solve this problem?

Answer 1

Try this for your toggle:

$(this).parent().parent().find("p").toggle();

Fiddle showing it in action: http://jsfiddle.net/Dwwtk/