jQuery toggle with ACF repeater

• labedzde

• February 26, 2017 at 4:32 am

I’m trying to implement jQuery toggling with an ACF repeater.

Right now, the toggling works, however, it toggles all repeater fields at once

For example, I’m using the repeater field for boxes of content with a title and a description. I want the title to always remain visible, but hide and show the description based on whether or not the a toggle button is pressed.

Here’s my HTML markup from the page template:

<div class="announcement-block-container">

<?php if( have_rows('announcement_block') ): ?><?php while( have_rows('announcement_block') ): the_row(); 

// vars
$title = get_sub_field('announcement_title');
$description = get_sub_field('announcement_description');
$email = get_sub_field('announcement_email');
$name = get_sub_field('announcement_contact_name');

?><div class="announcement-block">

<h5><?php echo $title; ?><div class="border"></div><span class="fa-stack fa-lg toggle-trigger">

</span></h5>

<div class="announcement-block-inner"><span><?php echo $description; ?>?php+echo+$email+?</span></div>

</div>	
<?php endwhile; ?><?php endif; ?></div>

Here’s the jQuery I’m using:

/*Add jQuery hide&show on announcement blocks on Take Action page*/

$(document).ready(function(){
$(".announcement-block-inner").hide();

$(".toggle-trigger").click(function(){
$(".announcement-block-inner").toggle();

});
});

I’d also like the toggle button (which is a plus icon from Fontawesome) to change to a minus icon when the box is open, then change back to a plus sign when the box is closed.

How can I adjust this code to get the desired result?

—- Versions —-
ACF v5.5.8
WP v4.7.2

• John Huebner

• March 5, 2017 at 1:10 am

This is really outside of ACF. But what you’ll need to do is to pass the “toggle” that was clicked to the function, I’m not sure how to do this because I’m not all that familiar with jQuery. Then you need to get the container element and only target items in that element. from what I can find, something like this, but please note, I cannot promise this will work, I have not tested it and like I said, I’m not all that great with jQuery

$(".toggle-trigger").click(function(){
  
  // I think that this will get the block on the toggle that was clicked
  var block = this.closest('.announcement-block');

  // I think this will toggle only this element
  block.find('.announcement-block-inner').toggle();

  // not sure how to change the icon given what you've supplied
  // I think what you need to do is get the icon element and change the class
  // based on the icon that is already shown
});