In this tutorial, we’ll go through how to create an accordion with dynamic accordions items that are populated by ACF repeater fields.
We’ll be using Advanced Custom Fields Pro for the repeater fields and Zion Builder Pro for both the accordions elements and the repeater functionality.
Setting up the ACF repeater field for the page.
Repeater fields can be a great way to allow clients to add new items to a page or template straight from the page edit screen without having to open up the builder to add new elements.
For this example, we’ll just have a repeater field named ‘Frequently Asked Questions‘ containing two subfields ‘Question‘ and ‘Answer‘. Note that Answer here is a WYSIWYG field so it enables users to add images and other bits other than just plain text.
Add the Accordions Element as Repeater Provider
Inside the builder, in the template for the page, we need to add an ‘accordions’ element from the element’s list. By default, it has two accordion items inside of it already. We only want one, which we’ll be repeating depending on how many ACF repeater rows there are going to be, so we just need to delete the second one.
In the advanced tab of the accordions element, enable the repeater provider then change the query type of ‘ACF repeater‘ and select your ACF repeater field.
This will make the whole accordions element act as a repeater, reading to repeat the elements inside of it based on the query.
Set the Accordion Item as Repeater Consumer
Now we have the provider, we want to make the actual accordion item a consumer so this is the element that will be repeated to create the correct number of accordion items for the FAQ accordion.
Inside the accordion item advanced settings, enable the repeater consumer. Immediately you should see the items duplicated (assuming you already have content inside the fields on the page). In the image below you can see there are now two items.
Populate with Dynamic Data from your sub fields
We now have our working accordion and just need to populate it with the data from the subfields. The accordion items have two parts, the title and the content.
To populate the title – Inside the accordion item settings, use the dynamic data option next to the title field. Choose repeater field from the dropdown and select your subfield ID from the list, in this case ‘faq_question‘
To populate the content – Inside of the accordion item will be a text element that is adding the content. Select the dynamic data option inside the text component to add your FAQ question subfield, in this case ‘faq_answer‘.
That’s it
The result will be a working accordion populated with ACF repeater fields. This same method can be used also if using a custom post type for FAQs, the only change would be choosing a post query instead of the ACF repeater in the reepater settings.
