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