Expand and Collapse Paragraphs with JQuery Inside of a Loop - php

Question

I am attempting to write some jQuery code that will expand a paragraph when a link is clicked and once expanded present another link that will allow the paragraph to be collapsed. These paragraphs are all generated within a foreach loop and I am having trouble selecting the correct paragraph because I am not sure of the best way to create unique IDs to pass back to jQuery because there in a loop.
Here is my view code:
<? foreach ($e['comments'] as $comment) : ?>
<div class="comment">
<p class="collapsed">
<?=character_limiter($comment['comment'], 100) ?><br />
Show More
</p>
<p class="expanded">
<?=$comment['comment'] ?>
<a href="#" class="collapse" >Show Less</a>
</p>
</div>
<? endforeach; ?>
And here is what I have so far with jQuery:
$(document).ready(function()
{
$("p.expanded").hide();
$("a.expand").click(function()
{
$(this).parent().hide();
return false;
});
});
I am able to hide the correct when clicking "Show More", however I am lost as to choosing the correct "expanded" paragraph and then implementing the opposite for collapsing.
My thoughts so far are that I need to somehow make the elements in question have unique ideas. The $comment array does have an 'id' value that code be appended to an id name for each attribute making them unique, but I am still confused about how to properly select things with jQuery.

Answer 1

IDs aren't the only way to target individual elements - you can target elements around the current jQuery element using a variety of methods, just like you have with parent.
You should be able to target the corresponding "expanded" block using siblings():
$("a.expand").click(function()
{
$(this).parent().hide();
$(this).parent().siblings('.expanded').show();
return false;
});