Accordions are a great way to organize large amounts of content into a compact, user-friendly layout. When combined with ACF repeater fields, you can turn structured dynamic data into automatically generated accordion items — without manually adding each section in Elementor. This approach is perfect for FAQs, product details, schedules, and any content that needs frequent updates.
With the Accordion widget from The Plus Addons for Elementor, you can easily create an accordion with the repeater field data.
To check the complete feature overview documentation of The Plus Addons for Elementor Accordion widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Now, to add the repeater field, you have to use the ACF (Pro) or SCF plugin. Here we are using the SCF (Secure Custom Fields) plugin.
Create a Repeater Field
For example, we want to add additional product details to each product as an accordion.
So, we will be creating a repeater field called “Product Details” with the following sub-fields –
- Title (Text)
- Content (Textarea)
1. In the New Field Group page, add the field group name.
2. Then select the Field Type as Repeater.
3. After that, add the Field Label.
4. Then add the sub fields as per your requirements, for instance, we will be adding Title as text and Content as a textarea.
Note: In the accordion, you can only show two fields i.e. title and content.
5. After that, set the rules where you want to add these fields, for instance, we’ll be adding them to the products.
Add Data to Repeater Fields
Now you have to add data in the repeater fields.
So, edit one of the posts from the post type to which you have assigned the repeater fields; in our case, it is products.
Create an Accordion with the Repeater Data
Now we want to display the product details added with repeater fields on the product details page.
To do this, we need to add the Accordion widget from The Plus Addons for Elementor to the single product template.
Note: If you don’t have Elementor Pro, you can use the free Nexter Extension plugin to create the template.
Add the Repeater block to the page or post where you want to show the repeater data, then follow the steps –
1. Select ACF Repeater from the Content Source dropdown.
2. Then add the repeater field key in the Repeater Field Key field.
3. After that, add the field keys in the Title and Content fields.
4. Once done, update the template.
Now you’ll see the accordion created with the repeater field data.
