Accordion widget

The Accordion widget requires a repeater field either on the current page, preview page(post etc) or on an option page. The supported subfields are text, textarea and wysiwyg.

ACF setup

ACF Repeater — Create a repeater field in ACF

ACF repeater fields — Add two subfields: text field and wysiwyg editor field.

You find it easiest by searching for ACF Accordion in the Elementor Search Widget … field:

Drag the following widget icon into your section to add the widget.

Settings

After adding the widget to your section/column the following settings are shown.

Field is a dropdown with the detected Repeater fields. When you select a repeater field the title and content fields will be shown. Accordion title and accordion content drop downs contain detected subfields.

Styling

You can style the whole accordion area, the title and the accordion content.

Accordion section

You have numerous options for how you want the accordion to behave and be styled.

The most interesting options are if the accordion should be opened from the start or not and how it should behave when a visitor clicks on a title.

Title section

Title have the standard styling options color, active color, typography, alignment and which HTML tag type to render.

Icon section

You can decide which side on the title that the icons should be rendered, and standard styling options. You can also select which icons that should be used.

Content section

You can style the accordion content and decide color, typography and padding.

Page/post ACF fields

The accordion tab order is based on the order of the ACF fields in the repeater field on the edit page.

Preview

The accordion looks by default as the standard Elementor Accordion. It also supports keyboard navigation.

Updated on 2019-08-30

Was this article helpful?

Yes No