All Collections
Tutorials
How To Use Dynamic Visibility - Events with ACF Repeater
How To Use Dynamic Visibility - Events with ACF Repeater

Learn how to use dynamic visibility event trigger in ACF Repeater and achieve an accordion functionality.

Updated over a week ago

If you want to use Event Visibility Show/Hide functionality based on event click in ACF Repeater, you can follow this tutorial.

Let's assume that we need functionality to show ACF repeaters Questions and return the answer when the user clicks on a button. Here question data and answer data will come from the ACF Repeater.

So, First of all, let's have an ACF Repeater Field and add two subfields, i.e. question and answer

Now let's create a section template for our repeater and add the below widgets in this template:

  1. Heading Widget (for question)

  2. Button Widget (that will return the answer)

  3. Heading Widget (for answer)

1. For the first heading widget simply return the question using the token: [acf:question]

2. For the button widget, set the ID dynamically using token [post|get_row_index]. This token will return the row index like 1, 2, 3.. and so on. As such, if you want to make it #row1 then set the token as [post|get_row_index] in the CSS ID and put the "row" in advanced settings

alternatively, you can simply use this token: row[post|get_row_index]

So, let give our button CSS IDs as #toggle1, #toggle2 and so on,

To do this we can use toggle[post|get_row_index]

3. Now let's give our answer heading widget(our element in this case) IDs of #row1, #row2, #row3 ... To do this lets use the token row[post|get_row_index] in CSS ID.

On the same widget, enable the visibility, set Keep HTML to true, and enable event trigger. On the event tab, you can now set click event. In the trigger on this element field set this token: #toggle[post|get_row_index]

Now choose the animation you want, leave the hide elements field, and set the toggle to enable.

Lastly, now you can save this template and set this template in ACF Repeater Widget.

Congratulations, now you can hide/show the answers based on the button click for all your questions and answers in the repeater.

Did this answer your question?