Store post content in a php variable and output them using for loop

Question

I want to show the content of my post in a separate row one at a time whenever a tab is clicked. I already achieved this but the problem is, its showing the output for only the last tab. Other tabs are not doing anything.

I guess I need a for loop to store all my contents in an array and then output in the second row.

<div class="page-tile row">
<?php $i = 0; ?>
<?php while( $page_query->have_posts() ) : $page_query->the_post(); ?>
<div class="tile col-lg-2 col-md-2 col-sm-2 col-xs-12">
    <a class="nav nav-tabs" role="tablist" href="#collapse-<?php the_ID(); ?>" data-toggle="tab" aria-expanded="false" aria-controls="collapse-<?php the_ID(); ?>">
        <?php the_post_thumbnail("kontakt-thumb",array('class' => 'img-responsive')); ?> 
    </a>
</div>

<?php ob_start() ?>
    <div class="kontakt-content tab-content">
        <div class="tab-pane" role="tabpanel" id="collapse-<?php the_ID(); ?>">  <?php echo the_content(); ?> </div>
    </div>
<?php $output = ob_get_clean(); ?>

<?php $i++; ?>    
<?php endwhile; ?>       

Need to show the content below when a tab is clicked. <div class="row"> <?php echo $output; ?> </div>

Answer 1

Every time you iterate through your loop, $output gets overwritten, which is why you only get the data for the final tab. You can avoid that by storing the values of $output as an array. Here's an example, based on your code. My edits follow each comment block.

<?php
/*
 * Create an empty array
 */
?>
<?php $outputs = array(); ?>

<div class="page-tile row">
    <?php $i = 0; ?>
    <?php while ( $page_query->have_posts() ) : $page_query->the_post(); ?>
        <div class="tile col-lg-2 col-md-2 col-sm-2 col-xs-12">
            <a class="nav nav-tabs" role="tablist" href="#collapse-<?php the_ID(); ?>" data-toggle="tab" aria-expanded="false" aria-controls="collapse-<?php the_ID(); ?>">
                <?php the_post_thumbnail( "kontakt-thumb", array( 'class' => 'img-responsive' ) ); ?> 
            </a>
        </div>

        <?php ob_start() ?>
        <div class="kontakt-content tab-content">
            <div class="tab-pane" role="tabpanel" id="collapse-<?php the_ID(); ?>">  <?php echo the_content(); ?> </div>
        </div>

        <?php
        /*
         * Store the data with a new array key
         */
        ?>
        <?php $outputs[] = ob_get_clean(); ?>

        <?php $i++; ?>    
    <?php endwhile; ?>

Now for your tabs, you iterate through the array.

<div class="row">
    <?php
    /*
     * Iterate through the array
     */
    foreach( $outputs AS $output ) { 
        echo $output;
    }
    ?>
</div>