Using ACF Repeater Fields for Creating Dynamic Accordion in Elementor - Elementor Addons

Using ACF Repeater Fields for Creating Dynamic Accordion in Elementor

dynamic accordion

Have you ever tried to implement accordion’s 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 form 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

ACF Repeater Fields

Adding data to Custom Fields

custom field data

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.
Repeater Block Layout
  • 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. 
dynamic content

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 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.
AE-ACF Repeater

2 thoughts on “Using ACF Repeater Fields for Creating Dynamic Accordion in Elementor”

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top