Accordions — 100 CSS effects

Collapsible panels, FAQ lists, and disclosure widgets in pure CSS.

Pure CSS with no dependencies or build step. Open any effect for a live preview, source code, and browser editing.

Page 2 of 2

Primary colour circle, square and triangle mark rows that grow from zero.

A hairline sits under each header and a lit segment travels it while open.

Filing cabinet drawers slide toward you and throw a shadow while they stay out.

Playful dots and diagonal confetti sit behind headers with a turning diamond.