• Elliot

• November 17, 2013 at 10:58 am

Hi @physalis

This can be accomplished quite simply by using a counter variable which you can use to link the top elements, to the bottom elements like so:

<?php if( have_rows('repeater_field') ): $i = 0; ?>
	<div class="repeater_loop1">
	<?php while( have_rows('repeater_field') ): the_row(); $i++; ?>
		<div class="subfield">
			<h2>repeater <?php echo $i; ?></h2>
			<h3><?php the_sub_field('subfield1');?></h3>
			<p><?php the_sub_field('subfield2'); ?></p>
			<a href="#block-<?php echo $i; ?>">Continue reading</a>
		</div>
	<?php endwhile; ?>
	</div>
<?php endif; ?>

<?php if( have_rows('repeater_field') ): $i = 0; ?>
	<div class="repeater_loop2">
	<?php while( have_rows('repeater_field') ): the_row(); $i++; ?>
		<div class="content-bluck" id="block-<?php echo $i; ?>">
			<h2>#div (repeater <?php echo $i; ?>)</h2>
			<h3><?php the_sub_field('subfield3');?></h3>
			<p><?php the_sub_field('subfield4'); ?></p>
		</div>
	<?php endwhile; ?>
	</div>
<?php endif; ?>

You will need to use 2 loops and I have taken the liberty of upgrading your code to use the have_rows function which is available in v4.3.0 as ‘the_repeater_field’ is quite old now

Thanks
E