Basically what I am trying to do is have the featured image of each of my posts display in rows of 3 showing only the featured image. When you click on one of the featured images, a div above the row slides up containing the post content.

I'm not sure how I can accomplish this since if I put the content div inside the loop, it generates a separate div for each post's content.

Here are some images to show what I am trying to accomplish:

Initial State: Initial State

Selected State: enter image description here

Here is the code I currently have:

<?php query_posts( array( 'post_status' => 'publish' , 'post_type' => array( 'stories' )  ) ); ?>
    <?php if ( have_posts() ) : ?>
        <?php while ( have_posts() ) :?>
            <?php the_post(); ?>
                <div id="story">
                    <div class="story-info">
                        <div class="story-author">
                            <h3 class="name"><?php echo get_the_title(); ?></h3>
                            <p class="location"><?php echo get_field('location'); ?></p>
                        <div class="story-content">
                            <?php echo get_the_content(); ?>
                    <div class="story-photo"><?php echo get_the_post_thumbnail($post_id, 'full'); ?></div>
        <?php endwhile; ?>
    <?php endif; ?>
<?php wp_reset_query(); ?>

And the Javascript:

$('.story-photo').click(function() {
    $(this).siblings(".story-info").slideToggle('fast', '');

However, because the content for each post is in it's own separate div, the result I get cascades instead of moving all of the images in the row down an equal amount. Any ideas how best to solve this?


1 Answer 1


Having 3 divs for the text content is not a problem, but they shouldn't be contained by the same div as the images...

You can have:

<div id="container">
    $count = 1;
    while loop
        <img id img$count..>
        <div id div$count...>

You then position the divs absolutely and hide them. Click on img1 shows div1, etc. The code example is very simplified, writing from my phone, but should be enough hopefully to get the logic....

  • That's how I have it set up currently. What I am looking for is for a way to make the text for each post display in the same div(only one div for the text of all of the posts). Then when you click on a featured image, the div that holds the text is replaced with the content of the corresponding post. So there would be multiple image divs that hold each post's featured image, but the text would all be loaded in the same div above the row of featured images.
    – APAD1
    Jun 23, 2014 at 20:18
  • But if the three divs are positioned at the same place, you wouldn't even notice they are different divs... They just need to have the same height and position... Jun 23, 2014 at 20:26
  • But right now you have the container div "story" inside the loop, I have it outside, so the text divs can be positioned always the same, no matter where the images are... Jun 23, 2014 at 20:44
  • Ok thanks, I'll play around with it and see what I can come up with.
    – APAD1
    Jun 23, 2014 at 21:44
  • Did it work? Otherwise I have an idea of how to have the text contents all in one div, I could write it down tomorrow... Jun 25, 2014 at 15:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.