ACF PRO REPEATER EXPAND AND COLLAPSE IN FRONT END

• batfink_76

• April 21, 2017 at 9:56 pm

I have used ACF Pro to create a product generator on a website.

Ideally, I would like to use a expand/collapse function for each product area listed.
But seem to have his a stumbling block as with each repeating row displayed on the page using the same div class or ID my code was getting confused.

Does anyone know of a simple way to implement a expand and collapse feature with ACF?

The page I have built out is here : https://tinyurl.com/lresbm4

You can see the black arrows to the right of each section. Clicking these would expand and collapse the area, but I ideally want the area to be collapsed on load.

Any help would be appreciated.

• SQD

• April 25, 2017 at 6:41 pm

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

accordion.jp....jpg