Kodza
Browse · 200

Expanding Panels

Full-height photo panels side by side: the one you hover, focus or tap widens as the others close in, its spine title slides away and rises upright with a line of text and a link. Stacked when narrow.

View the code Ask your AI
Image effects No dependencies imagepanelsaccordiongalleryhoverexpand Images mixed Added Nov 2026
/anim/expanding-panels/ GitHub Fullscreen

With your AI

Just ask.

Say it to your AI. It gets the exact code below, not its best guess, and knows where it goes.

Add the Kodza Expanding Panels to my page.

Not plugged in yet?
claude mcp add -t http kodza https://kodza.dev/api/mcp
Also in Codex, Cursor and VS Code.
kodza-expanding-panels.html 
<div class="kodza-expanding-panels">
  <ul class="kodza-expanding-panels__list">
    <li class="kodza-expanding-panels__panel is-open">
      <div class="kodza-expanding-panels__frame">
        <img class="kodza-expanding-panels__image" src="https://kodza.dev/media/kz-table-1400.webp" width="1400" height="1050" alt="A white table set with two glasses and a bottle, facing a misty sea with a sailboat" loading="lazy">
        <button class="kodza-expanding-panels__toggle" type="button" aria-expanded="true">
          <span class="kodza-expanding-panels__spine"><span class="kodza-expanding-panels__index">01</span> Étretat</span>
        </button>
        <div class="kodza-expanding-panels__content">
          <h3 class="kodza-expanding-panels__title">Étretat</h3>
          <p class="kodza-expanding-panels__meta">Normandy · 2&nbsp;guests · €140&nbsp;/&nbsp;night</p>
          <p class="kodza-expanding-panels__text">A table, two glasses, the sea. The listing says what's in the photo.</p>
          <a class="kodza-expanding-panels__link" href="#">See the stay</a>
        </div>
      </div>
    </li>
    <li class="kodza-expanding-panels__panel">
      <div class="kodza-expanding-panels__frame">
        <img class="kodza-expanding-panels__image" src="https://kodza.dev/media/kz-block-1400.webp" width="1120" height="1400" alt="A tall concrete slab standing alone on a bare floor" loading="lazy">
        <button class="kodza-expanding-panels__toggle" type="button" aria-expanded="false">
          <span class="kodza-expanding-panels__spine"><span class="kodza-expanding-panels__index">02</span> Alentejo</span>
        </button>
        <div class="kodza-expanding-panels__content">
          <h3 class="kodza-expanding-panels__title">Alentejo</h3>
          <p class="kodza-expanding-panels__meta">Portugal · 4&nbsp;guests · €120&nbsp;/&nbsp;night</p>
          <p class="kodza-expanding-panels__text">One wall, no neighbours. Silence is not an extra on the bill.</p>
          <a class="kodza-expanding-panels__link" href="#">See the stay</a>
        </div>
      </div>
    </li>
    <li class="kodza-expanding-panels__panel">
      <div class="kodza-expanding-panels__frame">
        <img class="kodza-expanding-panels__image" src="https://kodza.dev/media/kz-columns-1400.webp" width="1120" height="1400" alt="A row of square concrete pillars under a flat roof, casting striped shadows" loading="lazy">
        <button class="kodza-expanding-panels__toggle" type="button" aria-expanded="false">
          <span class="kodza-expanding-panels__spine"><span class="kodza-expanding-panels__index">03</span> Seville</span>
        </button>
        <div class="kodza-expanding-panels__content">
          <h3 class="kodza-expanding-panels__title">Seville</h3>
          <p class="kodza-expanding-panels__meta">Andalusia · 6&nbsp;guests · €260&nbsp;/&nbsp;night</p>
          <p class="kodza-expanding-panels__text">Forty pillars of shade. At 4&nbsp;pm, you'll want every one.</p>
          <a class="kodza-expanding-panels__link" href="#">See the stay</a>
        </div>
      </div>
    </li>
    <li class="kodza-expanding-panels__panel">
      <div class="kodza-expanding-panels__frame">
        <img class="kodza-expanding-panels__image" src="https://kodza.dev/media/kz-gap-1400.webp" width="1400" height="583" alt="Two concrete walls with a narrow gap between them, light falling through" loading="lazy">
        <button class="kodza-expanding-panels__toggle" type="button" aria-expanded="false">
          <span class="kodza-expanding-panels__spine"><span class="kodza-expanding-panels__index">04</span> Copenhagen</span>
        </button>
        <div class="kodza-expanding-panels__content">
          <h3 class="kodza-expanding-panels__title">Copenhagen</h3>
          <p class="kodza-expanding-panels__meta">Denmark · 3&nbsp;guests · €210&nbsp;/&nbsp;night</p>
          <p class="kodza-expanding-panels__text">Two walls, one gap. The light comes through at noon, no smart bulb required.</p>
          <a class="kodza-expanding-panels__link" href="#">See the stay</a>
        </div>
      </div>
    </li>
    <li class="kodza-expanding-panels__panel">
      <div class="kodza-expanding-panels__frame">
        <img class="kodza-expanding-panels__image" src="https://kodza.dev/media/kz-arch-1400.webp" width="1400" height="1400" alt="A concrete wall with a round-topped opening, sunlight pouring through it" loading="lazy">
        <button class="kodza-expanding-panels__toggle" type="button" aria-expanded="false">
          <span class="kodza-expanding-panels__spine"><span class="kodza-expanding-panels__index">05</span> Tangier</span>
        </button>
        <div class="kodza-expanding-panels__content">
          <h3 class="kodza-expanding-panels__title">Tangier</h3>
          <p class="kodza-expanding-panels__meta">Morocco · 4&nbsp;guests · €190&nbsp;/&nbsp;night</p>
          <p class="kodza-expanding-panels__text">One arch, facing west. Sunset included, no upgrade needed.</p>
          <a class="kodza-expanding-panels__link" href="#">See the stay</a>
        </div>
      </div>
    </li>
  </ul>
</div>

Checked

Checked before you paste.

Robots poked at it before you did. Every component goes through the same checks, and again each time it changes.

What ranLast run
Accessibilityaxe-core 4.10.2: the WCAG 2.1 A and AA rules, plus best practices. 0 issues
KeyboardThe Tab key gets there, and the focus ring shows when it does. Passed
Reduced motionTurn on reduced motion and what moved just appears. Nothing loops. Passed
Light and darkThe same checks on both themes, contrast included. Passed
WordPressPasted into Twenty Twenty-Five, Twenty Twenty-One, Astra, Blocksy, GeneratePress, Hello Elementor, Kadence and OceanWP. Nothing to flag. 8 / 8 themes
Robots checked this. A human with VoiceOver hasn't yet.
KeyboardPress them in the preview
On a panel
  • Previous panel, opened←/↑
  • Next panel, opened→/↓
  • First or last panel, openedHome/End

More like this

More in Image effects

See all Image effects Request a component