0

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>

  • I want to output my content after the while loop in a separate row. <div class="row"> <?php echo $output; ?> </div> – Saif Islam Oct 9 '15 at 10:54
  • I'm not sure what you're asking. If you need to output two separate sets of markup, just run the loop twice. – Milo Oct 9 '15 at 15:57
  • hey..i got it..thanks for your valuable comment... – Saif Islam Oct 9 '15 at 19:59
2

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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