When creating a dynamic accordion in Elementor, one of the most powerful tools at your disposal is Advanced Custom Fields (ACF) repeater fields. This feature allows you to store and display multiple pieces of information using a single field.
In this step-by-step guide, we’ll harness the power of the Unlimited Elements Content Accordion widget and fill it with dynamic data from an ACF field.
In this article, we’ll focus on the accordion widget, but it’s worth noting that Unlimited Elements provides a variety of widgets for easily displaying ACF repeater fields, eliminating the need for coding expertise.
Step 1: Create a Repeater Field
To begin, create a repeater field within ACF and then assign that field to the desired post type for display.
Choose the “repeater” field type and assign it a unique label and name.
Within the subfields section, add a two text fields to populate the repeater data.
In the settings area at the bottom, apply rules and conditions to assign the new field to the desired post type.
Step 2: Populate Custom Field
It’s time to navigate to one of your posts and add content in the repeater field. In this example, I will use the repeater field for cocktail instructions within a custom post type to display the recipe ingredients.
Step 3. Install and activate Unlimited Elements
Before you begin the next step, make sure to purchase Unlimited Elements Pro from the link below so that you can populate item-based widgets with repeater fields.
Then follow these steps:
Go to Plugins → Add New → Upload Plugin.
Choose the zip file you downloaded, upload, and then click Activate.
Once activated, you’ll need to enter your license key.
Now that you have the plugin installed, it’s time to start install the content accordion widget.
Step 4. Install the Content Accordion Widget
You can populate any dynamic widget from the unlimited elements widget library using an ACF repeater field, but in this example, we’ll use the Content Accordion widget.
Go to Unlimited Elements in the WordPress Dashboard
Got to Widgets -> Search for Content Accordion
Hover over the Content Accordion widget and click install
Step 5: Edit the Single Post Template
If you haven’t yet made a single post template, it’s a good time to create one. If you already have a single post template, you can modify it using the Elementor theme builder.
Drag and drop the Content Accordion widget from the widgets pane into your Single Post Template canvas and select
Step 6: Set the Widget Source
In the widget settings, designate the source as "ACF Custom Field".
Use the same field name in the ACF field name as you did in the ACF plugin settings.
For ACF field location, choose "current post".
Step 7: Insert Dynamic Content
It’s time to populate the widget with dynamic data from the custom fields we previously added.
Select the “item” field name from the dropdown menu under the “title source” section.
Enter the item name in the input field and make sure it matches the name assigned to the subfield in the ACF settings.
Apply the same process to the “content source.”
Optional: If you’ve forgotten the names you assigned in the ACF settings, you can use the “Debug – Show Input Data” toggle to display the subfield names in debug mode.
Step 8: Publish & Preview
That’s it, you’re done! It’s that easy. Now you can customize your widget’s display and behavior using the multitude of options available. When publishing the page, remember to assign it to the correct display conditions so it appears where you want on the website.
Wrapping it Up!
Unlimited Elements offers a range of widgets to effortlessly showcase ACF repeater fields, no coding expertise needed! We hope this tutorial has been helpful and will empower you to create more dynamic websites with advanced features and displays.
