Image Accordion (Divi)

Photo panels that grow when opened — on click, on hover or on autoplay — side by side, or stacked on phones. Each Panel has its own image, label, title with an icon, description, button, lightbox button and link button. Arrow keys, Home and End move between panels. Each example is labelled with the settings that make it.

1. The collection

Open on click · labels, descriptions, buttons, a lightbox button and a link button on each panel · closed panels show their title sideways · stacked on phones (the default).

2. Open on hover

Open a Panel On: Hover, Return When the Mouse Leaves · closed panels show the label (uppercase) and a greyscale image · Content Animation: Slide from the side.

3. Autoplay with a progress bar

Autoplay every 3.5 s with a progress bar in the accent colour; it pauses while hovered or focused and only runs while on screen. Speed 800 ms, open panel 5× wider.

4. Stacked on every device

Orientation: Stacked · text centred in the middle · 540 px tall · titles above an icon (Icon Position: Above).

How it works

Pick a service and the panel opens to show what it includes. Every panel is a Divi child module, so each one has its own settings — its image, texts and buttons.

Orientation, height, gutter, the open panel size and the text position can all be set per device, from Divi’s responsive toggles.

5. Text on a card

The Content Box has a white background, padding and a radius (Design → Content Box); dark title and description fonts; closed panels dimmed; text at the top right.

6. A dark lookbook

No gutter, no radius, 620 px tall, the open panel 6× wider, a coloured overlay on hover and a stronger one when open. Title HTML tag H2.

7. Styled from the Design tab

A pill label (Label Background), a gradient-free outline button with hover, square link and lightbox buttons, a title icon in the accent colour and a thin panel border.

8. A long strip

Eight panels, 320 px tall, the open panel 8× wider, closed panels show nothing — a compact gallery that expands on hover.