I’m using a repeater field and bootstrap tabs to display newsletters with each tab being a year. It’s outputting an addition div to the start of the second while. I’ve tried reset_rows(); and/or wp_reset_query(); with no luck.
if( have_rows( 'newsletters' ) ) : ?>
<div id="newsletters" class="border-bottom">
<div class="container">
<h2>Newsletter Archives</h2>
<ul class="nav nav-pills">
<?php $tabLabel = 1; ?>
<?php while ( have_rows('newsletters') ) : the_row(); ?>
<li class="<?php echo ($tabLabel == 1) ? 'active' : ''; ?>"><a href="#tab-<?=$tabLabel++?>" data-toggle="tab"><?php the_sub_field('year'); ?></a></li>
<?php endwhile; ?>
</ul>
<?php wp_reset_query(); reset_rows(); ?>
<div class="tab-content clearfix">
<?php $tabContent = 1; ?>
<?php while ( have_rows('newsletters') ) : the_row(); ?>
<div class="tab-pane <?php echo ($tabContent == 1) ? 'active' : ''; ?>" id="tab-<?=$tabContent++?>">
<?php the_sub_field('year'); ?>
</div>
<?php endwhile ?>
</div>
<?php wp_reset_query(); reset_rows(); ?>
</div>
</div>
<?php endif;
HTML output: notice the id=”tab-1″ is empty and the content for #tab-1 is in #tab-2 and so on and so forth.
<div id="newsletters" class="border-bottom">
<div class="container">
<h2>Newsletter Archives</h2>
<ul class="nav nav-pills">
<li class="active"><a href="#tab-1" data-toggle="tab">2018</a></li>
<li class=""><a href="#tab-2" data-toggle="tab">2017</a></li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="tab-1"> </div>
<div class="tab-pane " id="tab-2">2018</div>
<div class="tab-pane " id="tab-3">2017</div>
</div>
</div>
</div>
