32 CSS Accordions — Vertical & Horizontal

#interpolate-sizeallow-keywords#components#uitemplates#css-only

32 hand-coded CSS accordions — the general accordion mechanic hub covering mobile navigation menus, e-commerce filter sidebars, nested multi-level trees, exclusive single-open groups via the native name attribute, smoothly animated height: auto transitions with ::details-content, plus 26 visual variations spanning vertical, horizontal and pattern-breaking hybrid layouts. For an FAQ-specific deep-dive (25 patterns covering pure-CSS checkbox hack, native details/summary FAQ, Tailwind + Bootstrap 5 templates, glassmorphism, dark mode, sticky-sidebar hubs, live search, expand-all, FAQPage JSON-LD schema, WAI-ARIA keyboard nav, and voice search) see CSS FAQ Accordions. Every demo scoped under .acc-NN for no-collision pasting, prefers-reduced-motion guarded per WCAG 2.3.3, framework-agnostic.

32 pure CSSPublished 6 new designs · Updated on

Related25 CSS FAQ Accordions32 CSS Tab Designs22 CSS Dropdown Menu Designs15 CSS Navigation Menu Designs

Vertical Accordions24

Pure CSS FAQ Accordion with <details> and <summary> (No JavaScript) — preview
01 / 32Pure CSSNEW

Pure CSS FAQ Accordion with <details> and <summary> (No JavaScript)

The definitive FAQ pattern: native &lt;details&gt;/&lt;summary&gt; 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.

Published

Mobile Navigation Accordion Menu (CSS-Only Hamburger + Drill-Down) — preview
02 / 32Pure CSSNEW

Mobile Navigation Accordion Menu (CSS-Only Hamburger + Drill-Down)

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 &lt;details&gt; accordion with 48px touch targets, rotating indicators and indented child links — the exact 'hamburger menu without JavaScript' pattern devs search for.

Published

E-commerce Filter Sidebar Accordion with Exclusive Open (Product Filters) — preview
03 / 32Pure CSSNEW

E-commerce Filter Sidebar Accordion with Exclusive Open (Product Filters)

The store-sidebar staple: Size, Color and Price filter groups as &lt;details name=""&gt; 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.

Published

Nested Multi-Level Accordion (CSS Tree View for Docs & File Explorers) — preview
04 / 32Pure CSSNEW

Nested Multi-Level Accordion (CSS Tree View for Docs & File Explorers)

Three levels of &lt;details&gt; 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.

Published

Smoothly Animated <details> Accordion — Transition height: auto in Pure CSS — preview
05 / 32Pure CSSNEW

Smoothly Animated <details> Accordion — Transition height: auto in Pure CSS

THE most-searched accordion trick, solved: a native &lt;details&gt; 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.

Published

Exclusive Single-Open Accordion with the details name Attribute (Close Others Automatically) — preview
06 / 32Pure CSSNEW

Exclusive Single-Open Accordion with the details name Attribute (Close Others Automatically)

Opening one section automatically closes the rest — with ONE html attribute, zero JavaScript. The native name attribute on &lt;details&gt; 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.

Published

Underline Reveal Accordion — Editorial Minimal with Animated Rules — preview
07 / 32Pure CSS

Underline Reveal Accordion — Editorial Minimal with Animated Rules

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.

PublishedUpdated

Numbered Steps Accordion — Process Timeline for Onboarding Flows — preview
08 / 32Pure CSS

Numbered Steps Accordion — Process Timeline for Onboarding Flows

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.

PublishedUpdated

Plus / Minus Morph Accordion — CSS-Drawn Icon Animation — preview
09 / 32Pure CSS

Plus / Minus Morph Accordion — CSS-Drawn Icon Animation

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.

PublishedUpdated

Chevron Rotate Card Accordion — The Production Default, Perfected — preview
10 / 32Pure CSS

Chevron Rotate Card Accordion — The Production Default, Perfected

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.

PublishedUpdated

Brutalist Stamp Accordion — Bold Borders, Hard Shadows, Zero Subtlety — preview
11 / 32Pure CSS

Brutalist Stamp Accordion — Bold Borders, Hard Shadows, Zero Subtlety

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.

PublishedUpdated

Glassmorphism Frosted Accordion with backdrop-filter Blur — preview
12 / 32Pure CSS

Glassmorphism Frosted Accordion with backdrop-filter Blur

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.

PublishedUpdated

Minimal Rail Accordion — Timeline Dot Spine for Changelogs & Roadmaps — preview
13 / 32Pure CSS

Minimal Rail Accordion — Timeline Dot Spine for Changelogs & Roadmaps

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.

PublishedUpdated

Card Lift Accordion — Elevation & Scale on Open (Material-Style Depth) — preview
14 / 32Pure CSS

Card Lift Accordion — Elevation & Scale on Open (Material-Style Depth)

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.

PublishedUpdated

Diagonal Slant Accordion — Skewed Parallelogram Headers — preview
15 / 32Pure CSS

Diagonal Slant Accordion — Skewed Parallelogram Headers

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.

PublishedUpdated

Stepped Stair Accordion — Indented Cascade with Depth Levels — preview
16 / 32Pure CSS

Stepped Stair Accordion — Indented Cascade with Depth Levels

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.

PublishedUpdated

Circular Dial Accordion — Conic-Gradient Progress Ring Toggles — preview
17 / 32Pure CSS

Circular Dial Accordion — Conic-Gradient Progress Ring Toggles

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.

PublishedUpdated

Marquee Header Accordion — Scrolling Ticker Titles on the Open Item — preview
18 / 32Pure CSS

Marquee Header Accordion — Scrolling Ticker Titles on the Open Item

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.

PublishedUpdated

Code Comment Accordion — Editor-Themed Collapsible Doc Blocks — preview
19 / 32Pure CSS

Code Comment Accordion — Editor-Themed Collapsible Doc Blocks

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.

PublishedUpdated

Paper Fold 3D Accordion — perspective + rotateX Unfolding Panels — preview
20 / 32Pure CSS

Paper Fold 3D Accordion — perspective + rotateX Unfolding Panels

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.

PublishedUpdated

Equalizer Accordion — Animated Level Bars for Playlists & Audio — preview
21 / 32Pure CSS

Equalizer Accordion — Animated Level Bars for Playlists & Audio

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.

PublishedUpdated

Stacked Cards Deck Accordion — Overlapping Pull-Out Hand — preview
22 / 32Pure CSS

Stacked Cards Deck Accordion — Overlapping Pull-Out Hand

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.

PublishedUpdated

Holographic Slot Accordion — @property Rotating Border Sheen — preview
23 / 32Pure CSS

Holographic Slot Accordion — @property Rotating Border Sheen

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.

PublishedUpdated

Aurora Drift Accordion — Dark Ambient Glow that Follows the Open Item — preview
24 / 32Pure CSS

Aurora Drift Accordion — Dark Ambient Glow that Follows the Open Item

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.

PublishedUpdated

Horizontal Accordions8

Horizontal Strip Tabs Accordion — Vertical Text Columns with flex-grow — preview
25 / 32Pure CSS

Horizontal Strip Tabs Accordion — Vertical Text Columns with flex-grow

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.

PublishedUpdated

Horizontal Image Reveal Accordion — Expanding Photo Gallery Panels — preview
26 / 32Pure CSS

Horizontal Image Reveal Accordion — Expanding Photo Gallery Panels

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.

PublishedUpdated

Color Block Horizontal Accordion — Bold Flat Panels for Feature Sections — preview
27 / 32Pure CSS

Color Block Horizontal Accordion — Bold Flat Panels for Feature Sections

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.

PublishedUpdated

Numbered Spine Horizontal Accordion — Editorial Magazine Index — preview
28 / 32Pure CSS

Numbered Spine Horizontal Accordion — Editorial Magazine Index

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.

PublishedUpdated

Curtain Slide Horizontal Accordion — clip-path Reveal Panels — preview
29 / 32Pure CSS

Curtain Slide Horizontal Accordion — clip-path Reveal Panels

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.

PublishedUpdated

Vinyl Spine Horizontal Accordion — Record Shelf with Pull-Out Sleeves — preview
30 / 32Pure CSS

Vinyl Spine Horizontal Accordion — Record Shelf with Pull-Out Sleeves

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.

PublishedUpdated

Cinema Reel Horizontal Accordion — Dark Letterboxed Showcase — preview
31 / 32Pure CSS

Cinema Reel Horizontal Accordion — Dark Letterboxed Showcase

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.

PublishedUpdated

Aurora Strip Horizontal Accordion — Animated Gradient Glow Panels — preview
32 / 32Pure CSS

Aurora Strip Horizontal Accordion — Animated Gradient Glow Panels

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.

PublishedUpdated

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.

Related collections

39 CSS Breadcrumbs preview

39 CSS Breadcrumbs

39 hand-coded CSS breadcrumbs — Schema.org BreadcrumbList Microdata + WCAG 2.2 accessible (Google Rich Results eligible), :has() responsive collapse, dark/light theme toggle with color-mix, Shopify/Amazon e-commerce filter chip removal, Vercel/Linear/Notion SaaS dashboard app-shell pattern, Docusaurus/Mintlify sticky scroll-shrink header, Amazon-style dropdown sibling menus, NFT/Web3 holographic shimmer (@property + conic-gradient), SaaS marketing gradient text, Airbnb filter chip with container queries, editorial blog wave underline, developer docs one-click path copy (Clipboard API), and 26 more. Semantic HTML: <nav aria-label='Breadcrumb'> + <ol> + aria-current='page'. Framework-agnostic, MIT-licensed.

26 CSS Circular Menus preview

26 CSS Circular Menus

26 hand-coded CSS circular and radial menu designs, from the floating-action FAB speed dial and dashboard radial hubs to game-style pie-slice wheels, SVG gooey metaball fans, hexagonal honeycombs, iris-aperture reveals, orbiting satellites on offset-path, compass-rose directional nav, sci-fi HUD rings, glassmorphism popovers built on the native Popover API, vinyl-record players, and full-takeover nebula overlays on native dialog. Every design uses CSS trigonometry (sin(), cos()) or the counter-rotation trick for positioning, ships real keyboard navigation, aria-labels on icon-only buttons, and a prefers-reduced-motion guard. Copy-paste HTML, CSS and vanilla JS with zero framework dependencies — MIT licensed.

22 CSS Dropdown Menu Designs preview

22 CSS Dropdown Menu Designs

22 hand-coded CSS dropdown menu designs with live demos — slide-down fade, clip-path curtain reveal, 3D perspective flip, elastic bounce spring, glassmorphism float panel, stagger children reveal, mega-menu grid, underline nav fade, native details/summary, checkbox-hack mobile nav, nested multi-level flyout, icon sidebar flyout, split-screen mega-menu, segmented pill nav, color swatch picker, right-click context menu, keyboard-accessible roving tabindex, stagger blur entrance, command palette search, autocomplete suggestion, click-outside close, and multi-select chip. 15 pure CSS + 7 with a tiny vanilla JS snippet — no framework. WCAG 2.2 aria-expanded + aria-haspopup + focus management, prefers-reduced-motion honoured, MIT licensed.

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →