Help with some jQuery in a Wordpress Loop

Question

I am making a custom archive page, that will display the list of posts with their excerpt, and a button that when clicked toggles the rest of the post content. I have it working with this code, except that it toggles EVERY post content lol because in the loop they all get the class you know what I mean?

Can you help me fin a way to do this? There has to be a way to make it work in the loop right? Here is the (fail) code I have thus far, Thank you! `

<div id="more_content">
    <a href="#" class="see_all">More</a>
    <div class="content_hidden" style="display:none;">
        <div class="copy">
        <?php the_content(); ?>
        </div>

        <p class="tags"><?php the_tags(); ?></p>
        <?php comments_template(); ?>
    </div>
</div>

<script type="text/javascript" charset="utf-8">

$('.see_all').click(function() {

if ( $(this).html() == 'More'){
    $('.content_hidden').toggle('slow');

    $(this).html('Less');



}
else if ( $(this).html() == 'Less'){

    $('.content_hidden').slideUp('slow');
    $(this).html('More');

}

return false;

});

`

Answer 1

Use

<?php the_ID(); ?> 

to set the HTML ID of the element, and then Javascript to select for the ID of the container you want to reveal.

Answer 2

This should work:

$('.see_all').click(function() {
    if ( $(this).html() == 'More'){
        $(this).parent().find('.content_hidden').toggle('slow');
        $(this).html('Less');
    } else if ( $(this).html() == 'Less'){
        $(this).parent().find('.content_hidden').slideUp('slow');
        $(this).html('More');
    }        
    return false;
});

To quote you:

it toggles EVERY post content lol because in the loop they all get the class you know what I mean

What you need to do is address the .content-hidden within or relative to each container of the clicked link, as opposed to addressing all of them at the same time. Furthermore, it is possible that you are repeating IDs within your document (which is bad, forbidden, taboo, don't do, invalid, against spec, won't work, etc). So, your <div id="more_content"> should perhaps instead be <div class="more_content">