Home Forums Add-ons Repeater Field Grouping and Repeateing Repeater output, For an Accordian grid


Grouping and Repeateing Repeater output, For an Accordian grid

  • 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 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 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 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>

    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) {
            <div class="intro row">
        <div class="item item-<?php echo $count; ?>">
        </div><!-- item-->
          if ($count % 4 == 3) {
              </div><!-- intro-->
    else :
      // no rows found
  • 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.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.