pleate.uiEffects
Interactive

Accordion Gallery

A row of photo panels. The one under the pointer or keyboard focus opens wide with its caption, the rest shrink to strips. Stacks vertically on phones.
import { AccordionGallery } from "pleate/effects/accordion-gallery";

Trip photos

  • Mountains under a blue sky

    Dolomites

    Seven days on the Alta Via 1

  • River winding through a green valleyValley trail
  • Waterfall in a forestFalls
  • Red rock canyonCanyon
  • Castle on a hillOld fort

Props

items

Panels; href makes a panel a link.

{ src, alt, title, caption?, href? }[]

defaultIndex

Panel open at first.

numberdefault 0

height

Row height in px on wider screens.

numberdefault 420

grow

How much wider the open panel is.

numberdefault 5

label

Accessible name.

stringdefault "Gallery"

Accessibility

  • Each panel is focusable; focus opens it like hover does.
  • Arrow keys, Home and End move between panels.
  • Closed panels keep their title for screen readers.