Vibeset

Panel gallery

An accordion that looks like a gallery. Each panel header is a button with aria-expanded and aria-controls; what it shows when open lives in its own region. A pile of divs that resize on mouse movement does not tell a reader what is open nor lets you reach it with the tab key. There is always one open: a gallery with none is a row of strips that shows nothing. Closed content carries inert so its link leaves the tab order. Width is animated with flex-grow from 1 to 6 and the browser shares out the space, so adding panels needs no measurements touched. And it brings no photos from anywhere: each panel supplies its own or none, because a gallery that requests images from a third party by default leaks its user's visits.

And the React Bits original: Accordion Gallery

This piece is written from scratch in Vibeset: nothing was copied or ported from React Bits. It does something similar to their Accordion Gallery, and this is what we saw in theirs in case you prefer to use the original.

When to use it

To show four to six projects, destinations or products with photos, taking little height. With good photos: without them it has no charm.

Watch out for

It ships five sample photos loaded from picsum.photos: if you do not replace them, your site requests images from a third party. And it depends on GSAP, which is not MIT.

Accessibility

One of the best cared for: seven aria signals, three labels, keyboard support and reduced motion.