Follow these steps to display accordion items from an ACF Repeater field using the Dynamic Accordion widget:
- Make sure the
Advanced Custom Fields Proplugin is installed and activated. - Create or edit an ACF Field Group.
- Add a
Repeaterfield. This will be the parent field used by the accordion. - Inside the repeater, add at least one text-based sub field for the accordion title, for example
questionortitle. - Add one or more sub fields for the accordion content, such as
text,textarea,wysiwyg, orimage, depending on what you want to show in each item. - Assign the ACF Field Group to the post type, page, term, or options page where the accordion data should come from.
- Open the post, page, term, or options page that has this field group and add repeater rows with your accordion content.
- Edit the page with Elementor where you want to show the accordion.
- Drag the
Dynamic Accordionwidget into the page. - In the widget
Generalsection, setSourcetoACF Repeater. - Select your parent repeater in
ACF Repeater Field. - Choose the correct
Field Locationso the widget reads data from the right place: - Use
Current Postwhen the repeater is saved on the page or post being viewed. - Use
Current Termwhen the repeater is attached to a taxonomy term archive. - Use
Options Pagewhen the repeater is saved in ACF Options. - In the
Itemssection, choose the sub field to use forACF Repeater Sub field - Title. - In
Content Fields, add one repeater item for each sub field you want to display inside the accordion body. - For each
Content Fieldsitem, select the ACF sub field inACF Repeater Sub Field. - Choose the matching
Field Typesuch asText,Textarea,WYSIWYG, orImage. - Optionally set the
HTML Tagand link settings for each content field item. - Style the accordion as needed in the widget
Styletab. - Save or publish the page and preview it on the frontend.
Important notes:
- The widget will not output repeater items until both the parent repeater field and the title sub field are selected.
- If no repeater rows are added in ACF, the accordion will stay empty.
- The accordion body can display multiple ACF sub fields per row, because
Content Fieldslets you stack several sub field outputs inside each accordion item.