32 CSS accordions for FAQ sections, mobile nav menus, product filter sidebars, and docs file trees — spanning native <details>/<summary> disclosure, animated open heights, exclusive single-open groups, nested tree views, plus-minus and chevron icons, brutalist, glass and aurora styles, and horizontal strip, image-reveal, color-block and cinema-reel layouts. Scoped under .acc-NN for no-collision pasting, prefers-reduced-motion guarded, framework-agnostic.
Want to build production-ready CSS layouts, animations and UI from scratch?
You just browsed 32 accordions. Learn the Flexbox, Grid and animation thinking behind them, so the next component starts in your head, not in a copy-paste.
The definitive FAQ pattern: native <details>/<summary> styled into a clean, modern question list — SEO-crawlable answers, built-in keyboard support, screen-reader disclosure semantics and Chromium find-in-page that auto-opens the matching answer. Zero JavaScript, zero ARIA wiring needed: the browser does the accessibility for you.
A complete mobile nav in pure CSS: a checkbox-driven hamburger that morphs into an X, opening a slide-down panel where each category is a <details> accordion with 48px touch targets, rotating indicators and indented child links — the exact 'hamburger menu without JavaScript' pattern devs search for.
The store-sidebar staple: Size, Color and Price filter groups as <details name=""> accordions where opening one closes the rest — plus real checkboxes with custom styling, live result-count badges and color swatches. Solves the long-sidebar problem on category pages with zero JavaScript.
Three levels of <details> nested like a file explorer: folder chevrons, connector tree-lines drawn with borders, per-level indentation and file-type dots — the recursive structure devs need for documentation sidebars, org charts and directory browsers, with hierarchy you can read at a glance.
THE most-searched accordion trick, solved: a native <details> element that slides open AND closed with a real height transition — no fixed max-height hack, no JavaScript measuring. Uses the new ::details-content pseudo-element with interpolate-size: allow-keywords, degrading gracefully to instant toggle in older browsers.
Opening one section automatically closes the rest — with ONE html attribute, zero JavaScript. The native name attribute on <details> gives radio-group behavior for settings pages and dashboards, demonstrated here as a billing settings panel with animated open state and an active-section indicator bar.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A magazine-masthead take on the accordion: oversized serif questions on bare paper, no boxes, no chevrons — state is a hairline that draws itself across the full row when a section opens, and an italic index letter that fills in. For portfolios, editorial sites and studios where restraint IS the style.
An accordion that reads as a process: oversized 01–04 step numerals in circles joined by a vertical connector line, with the open step's circle filling in accent and its number knocked out white. The go-to pattern for onboarding checklists, how-it-works sections and multi-stage service explainers.
The beloved plus-to-minus toggle done right: the icon is two CSS-drawn bars (no icon font, no SVG request) where the vertical bar rotates 90° into the horizontal on open — so plus visually MORPHS into minus instead of swapping. Wrapped in a warm two-tone card list for product marketing FAQ sections.
The accordion you actually ship: separated card items, an SVG-quality chevron drawn in CSS that rotates a clean 180°, hover elevation, an open-state border tint and dividing rule between question and answer. Deliberately unflashy — every detail tuned so it drops into any SaaS product unchanged.
Neo-brutalism for disclosure: 3px black borders, an offset hard shadow that the open item physically 'presses' flat, uppercase mono labels, a stamped index chip and an unapologetic yellow page. The open interaction feels mechanical — click, CLUNK — perfect for portfolios, zines and dev-tool brands.
Frosted-glass panels floating over a colorful gradient scene: each item is a translucent card with backdrop-filter blur, a 1px inner light edge and a glow that brightens on open — the 'iOS control center' aesthetic developers want for hero FAQs on gradient-heavy landing pages.
The quietest accordion in the set: a single hairline rail down the left with a dot per item — closed dots are hollow, the open dot fills and emits a soft ring pulse. Reads like a vertical timeline, which is exactly its use case: roadmaps, changelogs, order tracking and career pages.
Depth as state: closed items are flat, flush cards; the open item lifts toward you — scaling to 102%, growing a layered soft shadow and pushing neighbors away with extra margin. The material-design 'picked up paper' metaphor, tuned so elevation alone tells you what's active from across the room.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
Headers as racing stripes: every summary is a parallelogram skewed −6°, stacked with alternating offsets so the closed accordion reads as a dynamic diagonal composition. Opening un-skews the active stripe back to square while its body slides out beneath — geometry itself is the state indicator. Built for sports, esports and event brands.
Items descend like a staircase: each header starts progressively indented and narrower, connected by corner brackets, so the closed state is already a diagram of descent. Opening a step slides it flush-left to full width — it 'steps forward' out of the stair to speak. A layout-as-metaphor pattern for processes that go deeper, funnels and layered architectures.
Every header wears a dial: a conic-gradient ring that sits empty when closed and sweeps a full 360° arc when its section opens, animated smoothly with a registered @property angle. Reads as 'sections you complete' — made for course syllabi, checklists and guided setups where progress is the mental model.
The open section's header becomes a ticker: its title duplicates into an infinite marquee scrolling across the row — ART DIRECTION ✦ ART DIRECTION ✦ — while closed headers sit still. Loud, fashion-editorial energy for lookbooks, drops and agency reels, with the marquee correctly pausable and motion-safe.
An accordion cosplaying as your editor: summaries are // comment lines with fold arrows in a line-numbered gutter, and opening one 'unfolds' a syntax-highlighted code block beneath — exactly how code folding looks in VS Code. Made for API docs, developer landing pages and technical blogs.
Sections unfold like a letter: each body starts folded flat against its header (rotateX(-90°) in real 3D perspective) and swings down open, with a gradient shadow that sweeps off the paper as it flattens. The most physical open animation an accordion can have — for invitations, storytelling pages and product reveals.
A dark playlist where the open track 'plays': its header grows a five-bar equalizer bouncing on staggered loops, the track title tints neon green, and the body reveals liner notes with a duration readout. The now-playing metaphor everyone recognizes, driving accordion state — for music, podcasts and anything with a queue.
Items rest as a fanned deck — each card overlapping the one above by half, peeking just its header edge like held playing cards. Selecting a card pulls it out of the stack: it slides down clear of the fan, flattens straight and opens, while the deck closes ranks above it. Spatial, tactile, and unlike any list-shaped accordion.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
Each closed item is a dark slot ringed by a faint conic seam; the open one ignites — a holographic gradient beam orbits its border continuously while an iridescent sheen sweeps the header text. The 'animated gradient border' effect done properly with a registered @property angle and mask-composited ring, for AI products, gaming and dev-tool launches.
The collection's closer: a deep-night page where a soft aurora blob drifts perpetually behind frosted items — and when you open a section, the glow gathers AROUND it, blooming through the glass while the item lifts gently. Ambient, slow and atmospheric: for meditation apps, night-mode products and premium 'calm tech' brands.
The foundational horizontal accordion: collapsed columns show their titles rotated with writing-mode: vertical-rl; selecting a strip animates flex-grow so it expands sideways while siblings compress. Radio-driven (arrow-key navigable), with content that fades in only after the column has room.
The portfolio showstopper: full-bleed image columns (rich CSS gradient scenes stand in for photos) that expand on selection to reveal a caption rising from a gradient scrim — grayscale-and-dim when collapsed, full color when active. The 'expanding image gallery' effect usually sold as a JS plugin, in ~40 lines of CSS.
Four saturated color fields, edge to edge, each owning one product pillar: the active block expands and reveals its manifesto line in huge type while collapsed blocks show only a rotated word. Flat, loud and grid-tight — a landing-page feature section disguised as an accordion.
A magazine table-of-contents turned interactive: cream paper, hairline column rules, and giant ghosted numerals 1–4 stacked in each collapsed spine. The open column lays its numeral behind a serif headline and dek like an art-directed spread. Quiet, typographic, and unlike any card-based accordion.
Every panel is always full width, stacked in the same grid cell — the active one is revealed by an animated clip-path wipe that sweeps across like a stage curtain, driven by a slim tab rail on the left. Unlike flex-grow accordions, content NEVER reflows: it's uncovered, not resized.
A crate of records you can flip through: collapsed panels are album spines — textured cardboard edges with the artist name running down them — and the selected one pulls out to reveal its full sleeve, a spinning vinyl disc peeking from the edge. Skeuomorphism with a purpose: everyone already knows how to browse a shelf.
A film-strip in the dark: near-black panels separated by sprocket-hole perforation rails, each expanding into a letterboxed 'frame' with a title card that tracks in like credits — wide letter-spacing easing to normal. Built for film festivals, video portfolios and anything that wants the lights turned off.
Dark glass columns over a living aurora: each collapsed strip leaks a slit of moving color, and the open panel becomes a window onto the full animation — layered conic and radial gradients drifting on independent timings via animated hue rotation. The 'animated gradient border/panel' effect at accordion scale.
FAQ
Frequently asked questions
How do I build a pure CSS FAQ accordion with no JavaScript?
Use the native <details> and <summary> elements — one <details> per question, the question text inside <summary>, and the answer as the details content. The browser handles opening, closing, keyboard toggling with Enter and Space, and disclosure semantics for screen readers, all for free. Style the summary's ::marker away and draw your own chevron or plus/minus indicator with CSS. Demo 01 in this gallery is the canonical pattern — every answer is real DOM text so Google indexes it, Chromium's find-in-page auto-opens the matching item on match, and no JavaScript bundle is loaded. Add FAQPage JSON-LD schema in your page head to unlock the accordion rich-results carousel in Google search.
Can I animate a CSS accordion smoothly to height: auto?
Yes — modern CSS finally solved this in 2024. Set interpolate-size: allow-keywords on your accordion root (or on :root site-wide) and add a transition to the ::details-content pseudo-element: height: 0 in the closed state, height: auto when [open], plus overflow: clip and transition-behavior: allow-discrete on content-visibility so the close animation runs before the content hides. Demo 05 shows the full recipe. Browsers without support (currently Firefox and Safari <18.4) simply toggle instantly, which is the correct progressive-enhancement fallback — the accordion still works everywhere, it just animates in Chrome 131+ and Safari 18.4+.
How do I make one accordion item close automatically when another opens?
Add the same name attribute to every <details> element in the group — for example <details name="faq"> on all of them. The browser will enforce exclusive opening natively, exactly like a radio-button group: opening one closes the currently-open sibling, with no JavaScript. This is the details name attribute, baseline in Chrome 120+, Safari 17.2+ and Firefox 130+ (March 2024 baseline). Older browsers ignore the attribute and simply allow multiple items open at once — a graceful, non-breaking degradation. Demos 03 (e-commerce filter sidebar), 06 (exclusive single-open) and 27 (code-comment accordion) all use this pattern.
What's the difference between a vertical and horizontal CSS accordion?
A vertical accordion stacks panels top-to-bottom and expands them downward — the familiar FAQ pattern using <details>/<summary>. A horizontal accordion places panels side-by-side and expands them sideways, typically with radio inputs plus <label> targets and CSS flex-grow transitions on :checked. Vertical is right for FAQs, release notes, docs and mobile menus (scannable, mobile-friendly). Horizontal is right for image galleries, portfolio showcases, feature strips and desktop hero sections where lateral space is plentiful. This collection ships 8 vertical (demos 07-14), 8 horizontal (demos 15-22), 6 use-case-first (demos 01-06), and 10 hybrid or pattern-breaking variations (demos 23-32) so you can pick whichever fits.
Are these CSS accordions accessible for keyboard and screen-reader users?
Yes. All 24 vertical demos use native <details>/<summary>, which the browser exposes as a disclosure button with a keyboard-operable toggle (Enter and Space), announces state changes ("collapsed" / "expanded") to screen readers, and integrates with browser find-in-page. Every summary carries a visible :focus-visible ring meeting 3:1 contrast. Horizontal demos use real <input type="radio"> plus <label> — arrow-key navigable inside the group and announced as a radiogroup by assistive tech. Every demo with continuous motion (marquee, aurora drift, equalizer bars) ships a prefers-reduced-motion calm-down block. Touch demos (mobile menu, filter sidebar) meet the WCAG 2.5.8 48×48px minimum touch target.
How do I build a mobile navigation menu with pure CSS accordion drill-downs?
Combine a visually-hidden <input type="checkbox"> hamburger with :has(:checked) driving a grid-template-rows 0fr → 1fr animated panel, then nest <details> categories inside for drill-down. Each category summary is a 52px row (comfortably above the WCAG 48px touch minimum), the plus indicator rotates 45° into an X on open, and child links indent with a border-left rule for visible hierarchy. Zero JavaScript, works in reader modes, respects browser back button. Demo 02 is the complete pattern. Requires :has() support (Chrome 105+, Safari 15.4+, Firefox 121+, baseline since 2023); without :has() the panel stays open — content is never lost, only the toggle stops working.
How do I build an e-commerce filter sidebar accordion in CSS?
Use <details name="filters"> so opening one filter group (Size, Color, Price) closes the others, then style real <input type="checkbox"> controls with their :checked sibling spans for size chips, color swatches with a ring indicator, and a checkbox list for price ranges. Every element stays a native form control, so the form submits, keyboards work, and screen readers announce state — no divs pretending to be checkboxes. Result-count badges use margin-left:auto to push right. Demo 03 ships the full pattern. Exclusive open via the name attribute is baseline since 2024; older browsers gracefully allow multiple groups open.
Are these accordions safe to copy-paste into an existing project?
Yes — every demo is scoped under a unique .acc-NN wrapper (acc-01, acc-02, …, acc-32), so any two demos coexist on one page with zero style bleed. All @keyframes are prefixed acc-NN- to avoid name collisions, and every input id or details name attribute is namespaced acc-NN-*. Continuous motion is guarded with @media (prefers-reduced-motion: reduce). No external dependencies, no framework, no runtime JavaScript — the code you copy is the code that renders in your browser. MIT licensed for personal and commercial projects, no attribution required.
