Accordion Rows

Pro feature: Requires Dynamic ACF Repeater for Elementor Pro 2.6.0 or newer.

Treat rows as one accordion lets a one-column Loop Grid present the Elementor Accordion widget from every Repeater or Flexible Content row as one coordinated list. You still design one ordinary Loop Item in Elementor; the plugin connects the rendered rows without replacing Elementor's markup or controls.

What the option changes

When the option is enabled:

• Elementor's generated accordion item IDs are made unique to the Loop Grid, source object, and complete row path.
• First expanded applies to the first accordion in the whole list instead of opening the first item in every row.
• Opening an item closes the open item in another row when Max Items Expanded is set to one.
• Arrow keys move through titles across every participating row. Home moves to the first title and End moves to the last.
• When the Accordion's FAQ Schema option is enabled, one FAQPage block is printed for the grouped rows instead of one duplicate block per Loop Item.
• Rows added by filtering or Load More join the same group.

The feature is disabled by default. It does nothing to Loop Grids that do not render an Accordion.

Standard Repeater setup

1. Create the fields

Create and populate a Repeater with at least two text-capable subfields, for example:

• question
• answer

Add several rows to a page or post so the Loop Item preview has real data.

2. Build the accordion Loop Item

Create an Elementor Loop Item and open ACF Repeater Loop Settings in its document settings.

1. Select the Repeater under ACF Row Schema for Loop.
2. Set Elementor's preview source to a post containing populated rows.
3. Add Elementor's current Accordion widget to the Loop Item.
4. Keep one accordion item in the widget.
5. Bind its title to question with ACF Repeater Text.
6. Place a Text Editor in the item's content container and bind it to answer with ACF Repeater Text.

For a conventional single-open FAQ, set the Accordion to First expanded and set Max Items Expanded to one. If the widget allows multiple expanded items, the grouped rows also allow multiple items to remain open.

Enable the Accordion's FAQ Schema option when the questions and answers should emit structured FAQ data. The plugin then aggregates the rows into one FAQPage block.

3. Configure the Loop Grid

Add Elementor's Loop Grid to the page and select the accordion Loop Item.

1. Set the grid to one column.
2. In Query, enable Use ACF Rows.
3. Select the Repeater under ACF Row Source.
4. Open Content → Accordion Rows.
5. Enable Treat rows as one accordion.

Publish or update the page, then test the list on the frontend while logged out.

Flexible Content setup

Flexible Content can mix accordion rows with other layouts. For example, an faq layout can use the accordion Loop Item while a note layout uses a normal text Loop Item.

1. Create a Flexible Content field with an FAQ layout containing question and answer fields.
2. Create the FAQ accordion Loop Item and select the FAQ layout under ACF Row Schema for Loop.
3. Create normal Loop Items for any non-accordion layouts.
4. Add a one-column Loop Grid and select the Flexible Content field under ACF Row Source.
5. Choose the ACF Flexible Content skin and map every layout to its Loop Item.
6. Enable Content → Accordion Rows → Treat rows as one accordion.

Only mapped layouts that actually render an Accordion take part. Other layouts remain in their original row positions. The first accordion row starts open even when a different layout appears before it.

Spacing the rows

The space between accordion items comes from the Loop Grid and the Loop Item—not from the grouping option. For a compact list, use Elementor's native controls:

1. Set the Loop Grid's Rows Gap to the desired value, such as 12px.
2. Set the Loop Item's outer container margin and padding to zero unless that spacing is intentional.
3. Apply borders, padding, and title spacing inside the Accordion widget itself.

Keep the grid at one column. Multiple columns break the visual and keyboard sequence expected from an accordion.

Validate the result

On the published frontend, verify:

• Only the first accordion item starts open.
• Opening the second or later item closes the previously open item when the widget is configured for one expanded item.
• Arrow Up, Arrow Down, Home, and End move focus through the complete list.
• Repeater questions and answers come from the correct rows.
• Flexible Content layouts without an Accordion still render normally between FAQ rows.
• Desktop and mobile have no unintended horizontal overflow or oversized row gaps.

If every row opens independently, IDs repeat, or the option is missing, see Troubleshooting: Accordion Rows.

Current boundaries

• Loop Grid is supported; Loop Carousel is not offered for this mode.
• Use Elementor's current nested-content Accordion widget. The legacy Accordion widget hidden from the panel since Elementor 3.15 is not supported.
• Generated e-n-accordion-item-* IDs are rewritten. Custom CSS IDs you author are left unchanged.
• A nested Loop Grid remains its own list. An Accordion nested inside a row's accordion content gets collision-safe IDs but keeps its authored open state.