---
title: 10. Accordion
description: "How to set up the Eventful Accordion widget in Elementor: first open, all open or all folded, the toggle icon, and pre-made templates."
url: "https://elementor.wpeventful.com/docs/accordion-widget/"
updated: "2026-10-21"
category: 3. Widgets
---

# 10. Accordion

The Eventful Accordion widget shows each event as a row that opens to show the details.

Accordion is part of Eventful Pro.

1. Add **Eventful Accordion** to the page and open **Content > Accordion Settings**.
   [![Eventful Accordion widget settings in Elementor: Accordion Mode and the expand icon](https://elementor.wpeventful.com/wp-content/uploads/2026/10/editor-accordion-v220@2x.webp)](https://elementor.wpeventful.com/wp-content/uploads/2026/10/editor-accordion-v220@2x.webp)
   Content > Accordion Settings.
2. Choose the **Accordion Mode**: **First Open** (the first row is open, and opening a row closes the others), **All Open** or **All Folded**.
3. Keep **Expand & Collapse Icon** on and pick the **Icon**, **Icon Size** and **Icon Color**. The icon turns when a row opens.

## Start from a design

Set **Template Type** to **Pre-made Templates** and pick Template One, Two or Three. Template One also shows a map of the venue inside each open row. See [Pre-made Templates](https://elementor.wpeventful.com/docs/pre-made-templates/).

## Image and text

In **Style > Image**, **Image Width** (per device) sets how much of the open row the image takes, and **Content Vertical Align** (Top, Middle or Bottom) places the text beside it. Leave them empty for the template's own layout. On phones the image sits above the text.

## Colours

In **Style > Accordion Item**, set the row background and hover background, featured-event backgrounds, border, corner radius, inner padding and the space between rows. **Accent Color** sets the date rail and buttons of the pre-made templates.

## Related articles

- [Table](https://elementor.wpeventful.com/docs/table-widget/)
- [Timeline](https://elementor.wpeventful.com/docs/timeline-widget/)
- [Pre-made Templates](https://elementor.wpeventful.com/docs/pre-made-templates/)

[See the Eventful Accordion demo →](https://elementor.wpeventful.com/events-accordion/)