Support

Account

Home Forums General Issues ACF PRO REPEATER EXPAND AND COLLAPSE IN FRONT END Reply To: ACF PRO REPEATER EXPAND AND COLLAPSE IN FRONT END

  • Not sure if this is what you’re after, but I did something similar on my own site:
    http://sethquittner.com/sqd/portfolio/print-projects/

    To get unique IDs I added a counter called $divNumber to the while loop

    Here’s the PHP:

    <?php
        
        $divNumber=1;
              if( have_rows('sqd-print') ):
                 while ( have_rows('sqd-print') ) : the_row();?>
            <article class="sqd-prints">
            <a href="javascript:toggleDiv('sqd-print-<?php echo $divNumber; ?>');">
                <div class="sqd-print-entry">
                  <img src="<?php the_sub_field('thumbnail');?>" alt="">
                  <span class="print-title">
                    <?php the_sub_field('print_title');?>
                    </span><br>
                  <span class="print-caption">
                   <?php the_sub_field('print_caption');?>
                  </span>
                <i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
                </div>
                <div class="clearfloat"></div>
            </a>
            <div id="sqd-print-<?php echo $divNumber; ?>" class="entry-content hidden sqd-print-lg">
              <img src="<?php the_sub_field('print_image');?>" alt="">
              <i class="fa fa-times-circle" aria-hidden="true"></i>
            </div>
        
            </article>
            <?php
              $divNumber =$divNumber  + 1;
              endwhile;
             else :
             endif;
    ?>

    and the jQuery (which you’ll need to enqueue):

    function toggleDiv(divId) {
         jQuery("#"+divId).slideToggle('2000',"swing", function () {
           jQuery(this).parent().siblings().children().next().slideUp("slow");
          });
         jQuery('.sqd-print-lg .fa,.entry-content').click(function() {
            jQuery("#"+divId).slideUp("slow"); 
    
        });
      };

    I used Font Awesome icons
    and a screenshot of my ACF is attached. You can ignore the video sub field.

    Hope this Helps.
    –Seth