Grouping and Repeateing Repeater output, For an Accordian grid

• creativepearson

• March 8, 2017 at 11:01 pm

I have an ACF Repeater field i’d like to output as an accordion grid, like so:

<div class="intro row">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
  <div class="item item-4"></div>
</div>

<div class="expanded row">      
  <div class="expand" id="item-1"></div>
  <div class="expand" id="item-2"></div>
  <div class="expand" id="item-3"></div>
  <div class="expand" id="item-4"> </div>
</div>

<div class="intro row">
  <div class="item item-5"></div>
  <div class="item item-6"></div>
  <div class="item item-7"></div>
  <div class="item item-8"></div>
</div>

<div class="expanded row">      
  <div class="expand" id="item-5"></div>
  <div class="expand" id="item-6"></div>
  <div class="expand" id="item-7"></div>
  <div class="expand" id="item-8"> </div>
</div>

I can group the initial row fine, it’s just the second “expanded” row i’m having trouble with. How can I repeat and group the second row of 4 correctly in the same loop? My current PHP:

<?php // check if the repeater field has rows of data
if( have_rows('features') ):
  // loop through the rows of data

  // add a counter
  $count = 0;
  $group = 0;
  
  while ( have_rows('features') ) : the_row(); 
   
    
	
    if ($count % 4 == 0) {
      $group++;
      ?>
        <div class="intro row">
      <?php 
    }
    ?>
    <div class="item item-<?php echo $count; ?>">
      
    </div><!-- item-->
    
   
    <?php 
      if ($count % 4 == 3) {
        ?>
          </div><!-- intro-->
        <?php 
      }
      $count++;
    endwhile;
else :
  // no rows found
endif;

?>

• John Huebner

• March 12, 2017 at 3:11 am

To do it all in one loop you need build your html in strings rather than output it. Store each section in a different variable and then echo these strings after your loop. There isn’t any way to output two different section of html in a single loop other than this.

The only other choice you have is to construct multiple loops and loop over the rows multiple times.