Image Accordion — Expanding Panels HTML CSS JS Snippet

The horizontal image accordion is a striking way to present a small set of categories or destinations in a compact, interactive strip: a row of panels where hovering or clicking one makes it expand to fill most of the width while the others shrink to slivers, revealing a caption on the active panel. It is a staple of travel sites, portfolios, and category landing pages. This snippet implements it in plain HTML, CSS, and vanilla JavaScript using nothing but flexbox and transitions — no fixed widths, no JavaScript animation loop.

Flex-grow is the whole trick

Each panel is a flex child with flex-grow: 1, so by default they share the row equally. The active panel gets .active which sets flex-grow: 6, claiming six times the space of its siblings. Because flex-grow is animatable, a single transition: flex-grow .5s produces the smooth expand-and-collapse — the browser distributes the remaining space and every panel eases to its new size simultaneously. Using flex-grow rather than width means the layout stays fluid: it adapts to any container width and any number of panels without recalculating pixels.

Collapsed vertical label, expanded horizontal caption

A collapsed panel is narrow, so its label is rendered vertically with writing-mode: vertical-rl — readable in the sliver without overflowing. When a panel becomes active, that vertical label fades out and a separate .ia-info block (a large title plus a one-line description) fades and slides up from the bottom-left with a slight delay, so the caption appears after the panel has begun widening. The emoji marker also slides from centred to left-aligned as the panel expands. These small staggered transitions are what make the interaction feel designed rather than abrupt.

Click and hover, without conflict

setActive is the single source of truth: it clears .active from every panel and sets it on the chosen one. The inline onclick makes it work on touch devices and as a stable demo. To add the classic hover-to-expand behaviour without breaking touch, the JS checks window.matchMedia('(hover: hover)') and only attaches mouseenter handlers on devices that actually have a hovering pointer — so phones get tap-to-expand and desktops get hover-to-expand, each using the same setActive function.

Image-ready

The panels use gradient backgrounds with emoji placeholders so the snippet is self-contained, but each panel's background is a single --g custom property — swap it for background-image: url(...) (or set --g to an image) to drop in real photos, and a built-in bottom gradient overlay keeps the white caption legible over any image.

Pair this accordion with a scroll-snap gallery for swipeable galleries, a photo gallery grid, or a bento grid layout.