← All elements
<div class="xg"><i style="--c:#f43f5e"></i><i style="--c:#f59e0b"></i><i style="--c:#10b981"></i><i style="--c:#0ea5e9"></i><i style="--c:#8b5cf6"></i></div>About this accordion
Five colour panels in a row where the hovered one grows wide and the others squeeze, using flex-grow transitions.
How it works
The five panels share a flex row, each with flex 1. Hovering one sets flex to 5 with a springy transition, so it grows into the available space while the others compress, with no JavaScript.
Ways to customise it
- Add more panels.
- Change the 5 for a bigger expansion.
- Use images in place of the gradients.
Good to know
Hover-only expansion is not available on touch, so also support :focus-within or tabindex for keyboard use if the panels hold content.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.