Help with some jQuery in a WordPress Loop

2 Views

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!
`

Read More
<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;

});

`

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. 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">