How to make post content from each post display within the same div

Question

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:

Selected State:

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>
                        <div class="story-content">
                            <?php echo get_the_content(); ?>
                        </div>
                    </div>
                    <div class="story-photo"><?php echo get_the_post_thumbnail($post_id, 'full'); ?></div>
                </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?

Thanks!

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...>
        $count++;
    Endwhile
</div>

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