Expandable Card — Free HTML CSS JS Shared-Layout Snippet

The expandable card is the polished interaction — popularized by the macOS App Store and shared-layout animations — where clicking a compact list card makes it grow smoothly from its spot into a centered modal showing full content, then shrink back into place when dismissed. This snippet implements that shared-element transition with plain HTML, CSS, and vanilla JavaScript using the FLIP technique.

The FLIP technique

FLIP stands for First, Last, Invert, Play, and it's how you animate between two layouts smoothly. Here, when a card is clicked, the code reads its current position and size with getBoundingClientRect (the First state), creates a fixed-position clone placed exactly over it, then on the next frame sets the clone's target position and size to a centered modal (the Last state). Because the clone has a CSS transition: all, the browser animates from First to Last automatically — the card appears to lift off the page and expand into a dialog. On close, the same process runs in reverse: the clone animates back to the original card's current rect, then is removed.

Hidden content in a template

Each card carries its expanded content inside a <template> element, which the browser never renders. On expand, that template's HTML is injected into the clone, so the compact card stays lightweight while the full description, feature list, and call-to-action only exist when needed. This keeps the list clean and avoids rendering heavy content for cards nobody has opened.

Source card hidden during expansion

When the clone takes over, the original card is set visibility: hidden so you don't see a duplicate behind the modal — but it keeps its space in the layout, so on collapse the clone has a correct rect to animate back into. Restoring visibility after the collapse transition completes hands the spot back to the real card seamlessly.

A blurred backdrop and full dismissal

Opening shows a blurred, dimmed overlay (backdrop-filter: blur) that transitions opacity and visibility together so it's non-interactive when closed. The modal can be dismissed by its close button, by clicking the overlay, or with the Escape key — all routed to the same collapse() function. An active guard prevents opening a second card while one is already expanded.

Keyboard accessible

Cards have tabindex="0" and respond to Enter and Space to expand, and Escape to close, so the whole interaction works without a mouse. Each card's accent color flows through a --c variable into the thumbnail, the expand button on hover, the feature checkmarks, and the CTA, so the modal is themed per card automatically.

Customizing it

Adjust the modal's target width and vertical position, change the transition duration and easing, restyle the expanded content, or theme each card via its data-color. Swap the emoji thumbnails for icons or images. Pair it with a bento grid of features or an Instagram gallery for a rich, interactive page.