Playground · 26 demos
CSS Accordions Playground
Pick any demo to open it in a live, side-by-side editor. Tweak the HTML, CSS or JS and see your changes render instantly. Reset any time to return to the original.
Or browse the full CSS Accordions collection for the gallery view with code panels.
01 Pure CSS
Underline Reveal
Vertical accordion with a left-anchored underline that grows across the open trigger.
Open
02 Pure CSS
Numbered Steps
Each row is a numbered step with a circular badge that fills amethyst when expanded.
Open
03 Pure CSS
Plus / Minus Morph
A pure-CSS plus icon that morphs into a minus when the row opens — both bars are pseudo-elements.
Open
04 Pure CSS
Chevron Rotate
A pure-CSS chevron arrow rotates 180° on open — built from a single bordered square.
Open
05 Pure CSS
Brutalist Stamp
Heavy-bordered, rectangular accordion with a hard offset shadow that flips on open.
Open
06 Pure CSS
Glass Frosted
Frosted-glass card accordion with backdrop-blur and a luminous rim that brightens on open.
Open
07 Pure CSS
Minimal Rail
A thin colored rail on the left highlights the active row — no other decoration.
Open
08 Pure CSS
Card Lift
Floating cards that lift with a soft shadow when expanded — accent color shifts subtly.
Open
09 Pure CSS
Strip Tabs
Horizontal column accordion — each strip widens when activated, others compress to a label.
Open
10 Pure CSS
Image Reveal
Hover or focus to widen a column; the image inside zooms to fit while siblings collapse.
Open
11 Pure CSS
Color Block
Solid color blocks switch via radio inputs; the active block expands and reveals body copy.
Open
12 Pure CSS
Numbered Spine
Vertical numbered labels rotate to horizontal when their column expands.
Open
13 Pure CSS
Curtain Slide
Active panel slides in from the right while the previous one collapses left — like a stage curtain.
Open
14 Pure CSS
Vinyl Spine
Records on a shelf — click a spine to slide it out and reveal its label.
Open
15 Pure CSS
Cinema Reel
Film-strip style horizontal accordion — sprocket holes top and bottom, frame brightens on focus.
Open
16 Pure CSS
Aurora Strip
Each panel hides a drifting aurora gradient — pop into view by widening the active strip.
Open
17 Pure CSS
Diagonal Slant
Vertical accordion where each row slants — open row straightens to a clean rectangle.
Open
18 Pure CSS
Stepped Stair
Each row indents progressively, creating a staircase — open row pulls back to flush left.
Open
19 Pure CSS
Circular Arc
A four-segment ring menu — labels follow each arc via SVG textPath. Selected arc lights up with its theme color, the hub shows the active step number, and the body reveals a matching description.
Open
20 Pure CSS
Marquee Header
Closed rows scroll their title as a slow marquee; opening pauses the marquee and reveals body.
Open
21 Pure CSS
Code Comment
Accordion styled as a multi-line code comment — "//" prefix on closed rows, full block on open.
Open
22 Pure CSS
Paper Folded
Each row looks like a folded paper card; opening unfolds it with a 3D rotateX flip.
Open
23 Pure CSS
Equalizer
Audio-EQ inspired — vertical bars rise to indicate the open row. Pure CSS, no JS.
Open
24 Pure CSS
Stacked Cards
Closed rows stack with a slight scale-down and translucent overlap; opened row pops to top.
Open
25 Pure CSS
Holographic Slot
Open row shows a holographic gradient sweep — like a foil sticker catching light.
Open
26 Pure CSS
Aurora Drift
Closed rows show a faint hue at the edge; open rows bloom into a slow-drifting aurora.
Open