Toggle Posts in wordpress using jquery

jebblack

New Member
I am trying to do something I have not seen before in wordpress. Basically, when you arrive at the blog, a title, thumbnail and an excerpt is displayed. When a toggle button is pushed, the post should slide down to reveal the content. (\[code\]<?php the_content(); ?>\[/code\])Here is my Jquery:\[code\]$(document).ready(function() { $('span.play a').click(function() { if ($('.toggleSection').is(":hidden")) { $('.toggleSection').slideDown("slow"); } else { $('.toggleSection').slideUp("slow"); } return false; }); });\[/code\]It works perfectly! However; because the toggle is placed within the wordpress loop, whenever the toggle button is pressed, all of the posts toggle open. For instance, If I have 10 posts on a page, and one toggle button is clicked, all of the toggles open. Here is my WP loop:\[code\]<?php if(have_posts()) : while(have_posts()) : the_post(); ?> <div class="post" id="<?php the_ID(); ?>"> <div class="thumbnail"> <?php the_post_thumbnail( 'mainimg' ); ?> <span class="play"><a href="http://stackoverflow.com/questions/3687638/#" onclick="jQuery('#comments').toggle();"><img src="http://stackoverflow.com/questions/3687638/<?php echo bloginfo('template_url'); ?>/images/play.png" width="30" height="36" alt="Play Video"></a></span> </div> <h2><a href="http://stackoverflow.com/questions/3687638/<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <h3>Posted in: <span><?php the_category(', ') ?> </span>On: <span><?php the_time('l, F jS, Y') ?></span></h3> <div class="entry"> <p><?php the_excerpt(); ?> </p> </div> <!-- entry --> <div class="toggleSection"> <p><?php the_content(); ?> </p> </div> </div> <!-- .post --> <?php endwhile; ?>\[/code\]What you are seeing above, is that when span.play a is clicked, the togglesection slides down and reveals the content. When any single toggle is selected, all of the content appears. I would like it so each toggle is unique within the WP loop, and only reveals that entry's content. Any ideas?You can see a demo of my work so far here: http://vitaminjdesign.com/littlewindow/ Press the play button over the thumbnails to toggle!
 
Back
Top