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.

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.