---
title: "Dual Image Accordion — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Pentaclay · Accordions. Dual Image Accordion is a modern, interactive Framer component that pairs a clean icon list with two synced side images."
canonical: "https://framer.elliotli.dev/component/dual-image-accordion"
---

[Home](/)/[Components](/components)/[Accordions](/components/category/accordions)/Dual Image Accordion

# Dual Image Accordion

Click-to-Expand Dual Image List

[View on Framer](https://framer.com/marketplace/components/dual-image-accordion/?via=elliot-li)

![Dual Image Accordion preview image 1](https://framer.elliotli.dev/og/component/dual-image-accordion/9c09c14cd296d707/1600x1200.jpg)

## Summary

Dual Image Accordion is a modern, interactive Framer component that pairs a clean icon list with two synced side images.

## Description

**Dual Image Accordion – Click-to-Expand List with Two Synced Images**

Dual Image Accordion is a modern, interactive Framer component that pairs a clean icon list with two synced side images. Instead of showing every detail at once, it displays a minimal list of icon-led titles by default, and expands the active item's description the moment a visitor clicks. Both side images update in sync with the active item, giving your "Why Us," services, or process section a premium, editorial feel with almost no setup required.

**Click-to-Expand with Dual Synced Images**

-   Expands to reveal a description beneath the clicked title.
    
-   Both left and right image panels update to match the active item.
    
-   Inactive items stay minimal and collapsed, keeping focus sharp.
    
-   Smooth height and fade transitions feel natural and intentional.
    
-   Only one item expands at a time, clean and distraction-free.
    
-   Fully responsive and optimized for modern GPU-accelerated performance.
    

**Customizable Design Controls** Dual Image Accordion includes full Framer property controls so you can instantly match it to your brand or layout.

**Customize**

-   **Items** – Add, remove, or reorder as many items as needed.
    
-   **Icon** – Assign a unique icon to each item.
    
-   **Title & Description** – Edit label and body text per item.
    
-   **Tab Images** – Assign two synced images (left and right) to each item.
    
-   **Text Color** – Set the color for titles and descriptions.
    
-   **Icon Fill (Open & Closed)** – Set separate icon colors for active and inactive states.
    
-   **Background Color** – Set the card background color.
    
-   **Open & Closed Icon Colors** – Fine-tune the expand/collapse icon per state.
    

**How It Works** Dual Image Accordion tracks click events across each list item. When a visitor clicks a title, the component smoothly animates its description open while both side image panels crossfade to the corresponding visuals.

## Rank history [How rankings work →](/terms#rankings)

-   All · #2115

## Details

- **Author**: Pentaclay
- **Price**: $5.00
- **Published**: 2026-08-06
- **Updated**: 2026-09-30
- **Added**: 2026-08-06
- **Categories**: Accordions

## More like this

-   [Reel Accordion](/component/reel-accordion) — Lamin Touray · Free — Services that play as you hover
-   [AnswerVault](/component/answervault) — knokknokD · $12 — AnswerVault handles the quiet production details that make a FAQ useful after launch: searchable answers, category filtering, crawlable…
-   [Fold Rows](/component/fold-rows) — H SHIFT WORKS · Free — Accordion for FAQs and services
-   [FaqX Faq Accordion](/component/faqx-faq-accordion) — Themomarket · $8 — Accordion FAQ Section