---
title: "Image Accordion"
url: "https://divitorque.com/docs/image-accordion.md"
canonical: "https://divitorque.com/docs/image-accordion/"
published: "2026-08-20"
modified: "2026-08-20"
author: "Fahim Reza"
tags:
  - "Modules"
---

# Image Accordion

The **Image Accordion** module lines up image panels that expand when a visitor hovers or clicks. Each panel carries its own image, title, text, and optional button, which makes it a compact way to present services, steps, or portfolio pieces.

![Divi Image Accordion module with four panels and the first panel expanded](https://divitorque.com/wp-content/uploads/2026/08/divi-image-accordion-module-demo.png)

## How to add the Image Accordion module

1. Add a section and row, then add the **Image Accordion** module.
2. Add an **Image Accordion Item** for each panel and set its image.
3. Choose the direction and whether panels expand on hover or click.

## Content

### Accordion

- **Direction**: Horizontal or Vertical.
- **Expand On**: Hover or Click.
- **Stack On**: Never, Tablet and below, or Phone only, for small screens.
- **Show Panel Content**: Always, or only on the expanded panel.
- **Content Position**: Top, Center, or Bottom of the panel.

### Items

- Each item has a **Panel Image** with **Image Alt Text**, an **Image Fit** (Cover or Contain), and focal point controls.
- **Title**, **Body**, and **Button Text** with its link.
- **Expanded By Default** marks the panel that starts open.

## Design

- **Height**, **Gap Between Panels**, and **Expanded Size** (how much the active panel grows).
- **Transition Speed** and **Transition Easing**.
- **Overlay Color** and **Expanded Overlay Color** to keep titles readable over the images.

## Tip

Three to five panels is the sweet spot. Set **Stack On** to Phone only so narrow screens get readable full-width panels instead of thin slivers.