Image accordion with `:has()`

Panels of images that expand on click. Pure CSS — radio inputs + the :has() selector.

Layouts Built JS-free

Use when — you have 3–6 distinct "zones" you want the user to browse: services, project areas, neighborhoods. Each panel a different category, click reveals detail. Don't use for content the user might want to read side-by-side — accordion forces serial viewing.

Live demo

Living

Living areas

Open-plan spaces designed for entertaining and quiet evenings alike.

Kitchen

Stone counters, custom cabinetry, and natural light from sunrise.

Bedroom

Bedrooms

Sound-isolated suites with private terraces and en-suite baths.

Outdoor

Heated pool, mature olive trees, and an outdoor kitchen for summer.

The key bits

.panel { flex: 1 1 0; transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.panel:has(:checked) { flex: 5 1 0; }     /* the active panel takes 5× space */
.panel .content { opacity: 0; transition: opacity 0.4s 0.25s; }
.panel:has(:checked) .content { opacity: 1; }

Mobile breakpoint — vertical accordion

@media (max-width: 720px) {
  .gallery { flex-direction: column; height: auto; }
  .panel { flex: 0 0 80px; width: 100%; }
  .panel:has(:checked) { flex: 0 0 280px; }
}

Code playbook: vault/Topics/web-patterns.md § Pattern 5 (Image accordion with :has()). Compatibility: Safari 15.4+, Chrome 105+, Firefox 121+.