Live preview Accordions
Rivet Downloads Accordion
Build groups punch open a format list where each row shows its extension and weight.
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 1 of 2
Live preview Accordions
Drift Blind Accordion
Horizontal slats tip open one after another to let the panel text show through.
Live preview Accordions
Echo Origami Accordion
The panel unfolds in two paper leaves that swing down on a shared crease.
Live preview Accordions
Flux Page Accordion
Chapters open like a book page turning over on its spine with a soft shade.
Live preview Accordions
Gear Release Accordion
Version rows expand into change notes marked by added, fixed and changed dots.
Live preview Accordions
Ridge Search Accordion
Search results collected into collapsible groups with hit counts and paths.
Live preview Accordions
Ripple Quiet Accordion
Hairline rules and wide spacing only, with a dot that rings out while open.
Live preview Accordions
Shaft Params Accordion
Endpoint rows unpack a parameter grid whose gaps grow open from nothing.
Live preview Accordions
Amber Edge Accordion
A resin coloured rail down the left edge stretches to full height when open.
Live preview Accordions
Anvil History Accordion
Activity is grouped by day and each group tightens its letter spacing as it lands.
Live preview Accordions
Arc Vapor Accordion
A sunset gradient with a receding neon grid running under the glowing rows.
Live preview Accordions
Aurora Stagger Accordion
Body lines lift into view one after another on a staggered delay ladder.
Live preview Accordions
Basalt Console Accordion
A terminal window where each command line folds its own output away.
Live preview Accordions
Bearing Help Accordion
A help centre where focusing the search box reveals a hint above the topic folds.
Live preview Accordions
Bloom Mono Accordion
Pure black and white rows invert completely the moment a section opens.
Live preview Accordions
Brass Ledger Accordion
Numbered ledger rows where the brass index chip fills as the note unrolls.
Live preview Accordions
Caliper Guide Accordion
Step numbers come from a CSS counter, so no digit is written into the markup.
Live preview Accordions
Canyon Tree Accordion
A file tree feel where nested folders indent behind their own guide lines.
Live preview Accordions
Cascade Pill Accordion
Fully rounded pill rows relax into soft rectangles as their body appears.
Live preview Accordions
Chalk Dual Line Accordion
Two line headers pair a title with a quiet subtitle and a folding caret.
Live preview Accordions
Chassis Notify Accordion
Every channel folds out a segmented control that sets how often it may reach you.
Live preview Accordions
Circuit Toggles Accordion
A settings panel whose groups unfold into rows that each carry a working switch.
Live preview Accordions
Cobalt Fill Accordion
The open header floods with cobalt blue swept in from the left hand edge.
Live preview Accordions
Coil Carton Accordion
Kraft cardboard panels with a fluted edge and a tape strip that stretches open.
Live preview Accordions
Conduit Privacy Accordion
Privacy rows pair an explanation fold with a switch, and the required one stays locked.
Live preview Accordions
Copper Rule Accordion
No shadows at all: a hairline rule draws itself in copper when a row opens.
Live preview Accordions
Coral Wave Accordion
An open row keeps a slow coloured wave drifting along its underline strip.
Live preview Accordions
Cove Swap Accordion
The trailing action word slides out and its opposite slides in on toggle.
Live preview Accordions
Cusp Zip Accordion
A zipper runs under the header and its pull travels across as the pocket opens.
Live preview Accordions
Dash Sketch Accordion
Dashed pencil boxes sit slightly askew and wobble a little when opened.
Live preview Accordions
Delta Split Accordion
Two independent columns of foldable rows sit side by side in one grid.
Live preview Accordions
Dune Right Accordion
Everything is anchored to the right edge and the marker turns from there.
Live preview Accordions
Dynamo Keys Accordion
Shortcut groups list their key caps while a small dynamo wheel keeps turning.
Live preview Accordions
Ember Stack Accordion
Cards overlap like a fanned deck until the chosen one steps out of the pile.
Live preview Accordions
Fjord Slide Accordion
Panels open sideways: the body widens from the left header out to the right.
Live preview Accordions
Flange Glossary Accordion
Letter groups sweep a tinted wash across the header while the term list unrolls.
Live preview Accordions
Flint Triangle Accordion
A clipped triangle marker pivots downward when its section takes the focus.
Live preview Accordions
Forge Lessons Accordion
Course chapters list their lessons with a play wedge, runtime and a watched state.
Live preview Accordions
Frost Panel Accordion
Frosted glass panels whose chevron flips and whose text thaws in from a blur.
Live preview Accordions
Garnet Steps Accordion
Numbered steps joined by a connector line, with only one step expanded.
Live preview Accordions
Gasket Errors Accordion
Error codes open into a cause and fix pair while the code chip picks up a ring.
Live preview Accordions
Girder Team Accordion
Crew groups slide their members in from the left beside a drawn truss marker.
Live preview Accordions
Glacier Icons Accordion
Opening a section uncovers a four cell grid of small geometric icon tiles.
Live preview Accordions
Gleam Scroll Accordion
A parchment scroll unrolls from its rod and the writing drops into place.
Live preview Accordions
Glide Glass Accordion
Frosted glass panes float over a colour blur and the body glides down on open.
Live preview Accordions
Granite Counter Accordion
Every row carries a count badge and only one section stays open at a time.
Live preview Accordions
Halo Curtain Accordion
Two velvet curtains part sideways to uncover the text behind each header.
Live preview Accordions
Harbor Plans Accordion
Priced plan rows compare at a glance and unfold their feature list on pick.
Live preview Accordions
Hush Wave Accordion
A soft wave sweeps across the panel and the text arrives in its wake.
Live preview Accordions
Ivory Dot Accordion
A bare list where a small dot swells into an open ring beside the active row.
Live preview Accordions
Jade Nested Accordion
A group folds open to reveal smaller accordions nested one level deeper.
Live preview Accordions
Kiln Assets Accordion
One batch opens at a time and each file draws a bar sized to how heavy it is.
Live preview Accordions
Kindle Envelope Accordion
The flap lifts on its hinge and the letter slides up out of the envelope.
Live preview Accordions
Lagoon Alerts Accordion
A notification tray whose day groups fold away with their unread markers.
Live preview Accordions
Lapis Drawer Accordion
Each row looks like a drawer with a grip handle and its contents slide out.
Live preview Accordions
Lattice Order Accordion
An order summary whose subtotal rows unroll with dotted leaders under a fixed total.
Live preview Accordions
Lever Commands Accordion
A command cheat sheet whose lever arm tilts over as the monospace rows appear.
Live preview Accordions
Lull Map Accordion
A paper map spreads out of its creases and the fold shading fades as it opens.
Live preview Accordions
Marble Card Accordion
Card shaped rows that lift on hover and let the description rise into place.
Live preview Accordions
Meadow Code Accordion
Each file row unrolls a numbered code block with tinted selectors and props.
Live preview Accordions
Mesa Contact Accordion
A short question list closed off by a footer that offers a contact link.
Live preview Accordions
Mica Grid Accordion
Grid template rows grow from zero while a mica flake glints beside the label.
Live preview Accordions
Monsoon Inset Accordion
Depth comes only from inset hairlines, never from a drop shadow underneath.
Live preview Accordions
Nickel Switch Accordion
Every header carries a small metal switch that slides over as the row opens.
Live preview Accordions
Oasis Legend Accordion
Colour coded category groups where the open group borrows its own hue.
Live preview Accordions
Obsidian Arrow Accordion
The arrow head slides forward and turns a quarter turn while the text swipes in.
Live preview Accordions
Onyx FAQ Accordion
A quiet FAQ list whose plus sign rotates into a minus as the answer drops.
Live preview Accordions
Opal Strip Accordion
A horizontal ribbon where the chosen column widens and its text fades in.
Live preview Accordions
Orbit Relief Accordion
Softly embossed panels sink into the surface the moment their section opens.
Live preview Accordions
Pearl Avatar Accordion
Each row opens with an initial badge that brightens as the message unfolds.
Live preview Accordions
Piston Filters Accordion
Filter groups open with a piston rod stroke and list tickable options with hit counts.
Live preview Accordions
Prairie Key Accordion
Keyboard shortcut badges sit in the header and press down while open.
Live preview Accordions
Pulse Brutal Accordion
Heavy black outlines over a hard offset block that snaps open in two steps.
Live preview Accordions
Pylon Tasks Accordion
Project phases fold open onto tick boxes that strike their own task line through.
Live preview Accordions
Quartz Clip Accordion
The panel is wiped open from the left edge with an animated clip path.
Live preview Accordions
Quiver Door Accordion
Three doors stand in a row and each swings open on a hinge to show its room.
Live preview Accordions
Ratchet Fix Accordion
A troubleshooting tree where the yes and no answers open two different branches.
Live preview Accordions
Reef Percent Accordion
Each header carries a coverage percentage and a row of filled meter pips.
Live preview Accordions
Ruby Timestamp Accordion
A log of timestamped entries where the detail line drops in under the clock.
Live preview Accordions
Savanna Meta Accordion
File style rows keep size and date on the right of every folding header.
Live preview Accordions
Slate Stack Accordion
A radio group keeps one slab open and the body grows with grid template rows.
Live preview Accordions
Socket Permissions Accordion
Permission rows squash open from the top edge to explain why access is requested.
Live preview Accordions
Spindle Specs Accordion
Exclusive rows open a two column specification sheet that grows from zero height.
Live preview Accordions
Spiral Fan Accordion
Blades sweep out from one pivot like a paper fan while the note appears.
Live preview Accordions
Summit Thick Accordion
The open section thickens its outline while the padding shrinks to absorb it.
Live preview Accordions
Sway CRT Accordion
A phosphor green tube with scanlines where each entry unrolls in monospace.
Live preview Accordions
Tether Locale Accordion
Region groups swing open onto locale rows and the chosen code lights up in place.
Live preview Accordions
Thicket Status Accordion
Pass, fail and pending markers are drawn in pure CSS beside each label.
Live preview Accordions
Tide Dotted Accordion
No boxes at all: dotted rules divide the rows and the label spaces out.
Live preview Accordions
Topaz Progress Accordion
A thin progress line under each header runs to full width as the row opens.
Live preview Accordions
Tundra Quote Accordion
Every row folds out a bordered pull quote with its source line underneath.
Live preview Accordions
Turbine Account Accordion
Account sections tilt down on a hinge in real perspective instead of sliding open.
Live preview Accordions
Valley Zebra Accordion
Alternating row tints keep a dense list readable while sections expand.
Live preview Accordions
Valve Logs Accordion
Log levels collapse into groups and the valve wheel turns a quarter when opened.
Live preview Accordions
Vault Deco Accordion
A gold framed panel with a deco ray fan that turns half around on selection.
Live preview Accordions
Verge Bellows Accordion
A ribbed bellows stretches between the header and the body as the fold expands.