Home Forums Add-ons Repeater Field jQuery toggle with ACF repeater


jQuery toggle with ACF repeater

  • 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">
    <div class="announcement-block-inner"><span><?php echo $description; ?>?php+echo+$email+?</span></div>
    <?php endwhile; ?><?php endif; ?></div>

    Here’s the jQuery I’m using:

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

    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

  • 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

      // 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
      // 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
Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘jQuery toggle with ACF repeater’ is closed to new replies.