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 />
            <a href="#" class="expand">Show More</a>
         </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;
});