How to Use ACF Repeater Fields for Creating Dynamic Accordion in Elementor

Have you ever tried to implement accordions dynamically to display data from the ACF Repeater Fields? If not, then why not just give it a try? Using Accordions can be a handy way for managing larger amounts of data, as through them, the data can be represented in small bits. 

To achieve this, you can use our AnyWhere Elementor Pro plugin, which allows you to display data from the ACF Repeater fields differently. 

So in this tutorial, we will display the ACF Repeater fields data in an Accordion using AE – ACF Repeater widget in Elementor.

To begin with, let us consider an example of an FAQ section under an options page named Company.

Key Takeaways

• Learn how to create a dynamic accordion layout using ACF Repeater fields in WordPress.
• Explore the power of AnyWhere Elementor Pro to customize your content display without writing complex code.
• Discover how to organize repeated content like FAQs cleanly using Accordion UI.
• Understand how to use AE Templates and the ACF Repeater widget to design block layouts inside Elementor.
• Implement better user experiences by managing long data lists in compact and interactive accordion tabs.

Steps to Create a Dynamic Accordion Using ACF Repeater

Step 1: How to Create an Options Page

To create an Options Page using code, add the following code to the functions.php file of your child theme.

If you prefer using the ACF plugin’s interface instead, check out our detailed guide on how to add an Options Page in ACF.

if( function_exists('acf_add_options_page') ) {
 
 acf_add_options_page(array(
  'page_title'  => 'Company',
  'menu_title' => 'Company',
  'menu_slug'  => 'company',
  'capability' => 'edit_posts',
		'redirect'     => 'false'
  
 ));
}

Step 2: How to Create Field Groups in ACF

To learn how to make a field group using ACF, check out our detailed article on creating custom fields with ACF.

We’ll create a field group with a repeater field called FAQ, and inside it, we’ll add two sub-fields.

Once you’ve added the fields, scroll down to the Location Rules section and set the conditions as shown in the screenshot.

Step 3: Adding data to Custom Fields

How to Display Data from ACF Repeaters inside an Accordion

For creating a dynamic accordion in Elementor, we first have to design a layout for the content inside an accordion:

Step 1: Create a Repeater Block Layout

• Create a new AE Template and do the following configurations.
  • Render Mode: ACF Repeater Block.
  • Field location: Select Option.
  • Repeater Field (ACF): Select the Repeater field FAQ.

• Now save the template and edit with Elementor.
• In Elementor, now select appropriate Elementor widgets, and under the dynamic section, select ACF Repeater fields accordingly.
• Specify the name of the repeater and the field type. 

Pro Tip: Make sure to design the complete block layout in a Single Parent Section. You can use the inner section widget if required.

Step 2: Use AE – ACF Repeater widget

Use the ACF Repeater widget wherever you need to for creating a dynamic Elementor accordion, and do the following configurations.

• Skin: Select Accordion.
• Template: Select the repeater block layout created earlier.
• Repeater Field(ACF): Select the repeater field FAQ. 
• Tab Title: Specify the ACF field key to display at the top of each tab title.
• Under the Style, tab gives the settings related to styling the accordion, title, and content accordingly.

Conclusion

Using ACF Repeater fields with the AE – ACF Repeater widget in Elementor is a smart and efficient way to display large amounts of data, like FAQs, in a neat accordion layout. This method improves content organization and provides a better user experience. Whether you’re building an FAQ section or showcasing repeated content, combining ACF with AnyWhere Elementor Pro makes the process flexible and easy to manage — even for non-coders.

FAQs on Using ACF Repeater Field