Using ACF Repeater Fields for Creating Dynamic Accordion in Elementor

Have you ever tried to implement accordions dynamically for displaying 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 then data can be represented in small bits. 

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

So in this tutorial, we will be displaying 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.

Creating an Option Page

Add the following code in function.php of the child theme.

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'
  
 ));
}

Creating Custom Fields

Adding data to Custom Fields

Displaying 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:

1. Creating 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.

Using 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.