32 Tailwind CSS accordions for pricing-page FAQs, mobile nav menus, product filter sidebars, and docs callouts — spanning smooth height transitions, single-open sections, nested trees, plus-minus and chevron icons, brutalist, glass and aurora styles, plus timeline, playlist and filmstrip layouts. Scoped under .tac-NN for no-collision pasting, prefers-reduced-motion guarded, framework-agnostic.
Building a whole Tailwind app, not just this component?
You just browsed 32 Tailwind accordions. Untitled UI Pro unlocks 5,000+ components and sections and 250+ page examples for React, styled with Tailwind CSS v4. One licence is a one-time $349 with lifetime updates; teams start at $999.
The pricing-page FAQ every SaaS ships, rebuilt as a two-column Tailwind UI section: heading, intro and a contact card on the left, a ringed card of native <details> questions on the right. The answers animate open and closed with v4's details-content: variant plus [interpolate-size:allow-keywords], the plus icon spins into a cross, and an indigo rail draws down the open item.
A complete app-style mobile nav inside a phone frame: a checkbox hamburger that morphs into an X, a panel that slides open with grid-rows-[0fr] → grid-rows-[1fr], and drill-down <details> sections with icon tiles, item counts and a lime CTA. State is read with group-has-[#tac02-burger:checked]/nav: — Tailwind's spelling of :has().
A real category page, not a lone sidebar: breadcrumb, sort button, a six-product grid and a filter column whose groups are <details name="tac03-filters"> — open one and the browser closes the rest. Inside are real inputs restyled with peer-checked:: tick boxes, a size grid with a sold-out state, colour swatches and radio price chips. A dot on each summary (group-has-checked:block) shows which closed groups still hold an active filter.
Four levels of nested <details> rendered as a dark IDE explorer beside an open Markdown file: chevrons that turn, folder icons that swap open/closed, indent guide lines drawn with border-s, colour-coded file-type glyphs and git status letters. The trick for nesting is the arbitrary variant [[open]>summary>&]:rotate-90 — it reads only the nearest details, where a named group-open: would leak into every closed sub-folder.
The most-searched accordion problem, solved entirely in class lists: a native <details> changelog that slides open and closed with a real height: auto transition. Tailwind v4's details-content: variant styles the ::details-content box, [interpolate-size:allow-keywords] on the root makes auto animatable, and transition-discrete holds the content visible until the close finishes.
Open one section and the others close themselves — with one HTML attribute and zero JavaScript. Every <details> in this dark workspace-settings panel shares name="tac06-settings", so the browser enforces at-most-one-open like a radio group. The active panel is highlighted three ways in utilities: a gradient rail that grows in with open:before:scale-y-100, a violet glass surface, and a filled icon tile; both the opening and the browser-closed panel animate their height through details-content:.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
An editorial, box-free accordion for studios and portfolios: oversized serif questions on warm paper, separated only by hairlines. State is a rule that draws itself across the row — after:scale-x-0 after:origin-left to group-open:after:scale-x-100 — previewed at low opacity on hover, while the italic index letter fills from outline to vermilion and a thin plus turns into a cross.
An onboarding checklist that reads as a process: numbered badges joined by a connector line, a progress header, and one focal step at a time. Each step is a <details name="tac08-steps">; its connector segment is a before: pseudo-element on the item, completed steps carry a bare data-done attribute that turns their segment and badge blue via data-done:, and the open step's badge fills and gains a halo with group-open:.
The plus that folds into a minus, ported into utilities: two <span> bars inside a square key, the vertical one turning group-open:rotate-90 onto the horizontal while the whole key spins group-open:rotate-180 on a springy curve. Set as a bold Swiss type-foundry licensing FAQ in warm ivory, ink black and signal orange — with a two-way height animation from the details-content: variant.
The accordion you actually ship, finished to shadcn/ui standards: separated zinc cards with hairline rings, an SVG chevron in a fixed chip that turns group-open:rotate-180, a 1px hover lift, an open-state ring tint, and a divider that exists only inside the open card. Set in a dark help-centre page, with a two-way height animation from the details-content: variant.
Neo-brutalism for disclosure: 3px ink borders, zero-blur offset shadows written as shadow-[6px_6px_0_var(--color-tac11-ink)], and an open state that physically presses the slab into the page — open:translate-x-1 open:translate-y-1 while the shadow shrinks by the same 4px. Each question owns a loud colour (yellow, hot pink, cyan) that floods its index chip and arrow key on open. A zine FAQ with ruled-paper answers.
Frosted panes floating over vivid, slowly drifting colour blobs: each item is backdrop-blur-xl backdrop-saturate-150 glass with a hairline ring-white/15 rim and an inset top highlight, brightening to bg-white/14 on open. The panes default to a solid tinted fill and only turn translucent inside supports-[backdrop-filter:blur(1px)]:, so text is never stranded on raw gradient. An ambient-sound app FAQ.
A product changelog built as a vertical timeline: one gradient spine, a dot per release that fills emerald and fires a single ring pulse when its <details> opens, mono version badges and colour-coded New / Improved / Fixed rows. The spine is a before: line on the list, the dots are row-relative so they never drift, and the panel height animates with the details-content: variant plus [interpolate-size:allow-keywords].
Depth as state: closed plan cards sit flat on a lavender stage, and the open one lifts toward you — open:scale-[1.02], a three-layer contact + key + ambient shadow token, clearance margins that push its neighbours back and a gradient light-edge along the top. Built on <details name>, so only one plan is ever lifted.
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 -skew-x-12 parallelogram with its label counter-skewed by skew-x-12 so the type stays upright, stacked in a zigzag with alternating translate-x offsets. Opening a stripe squares it up (group-open:skew-x-0), floods it electric red and drops a hard offset shadow — the geometry itself is the state. An esports match-day guide on a dark speed-lined stage.
Items descend like a staircase: each level is indented by ml-[calc(var(--i)*var(--tac16-pitch))] and hooked to the step above by an L-shaped bracket, so the closed list is already a diagram of depth. Opening a level transitions its margin to zero — it steps forward out of the stair to full width while the others hold formation. Shown as a four-level learning path with progress states, on a warm sand stage with deep-teal ink.
A course-syllabus accordion where every module header wears a conic-gradient progress ring. Each ring shows its module's completion at rest; opening the module sweeps a bright arc around to that value, animated by a registered @property angle and driven entirely by group-open:[--tac17-arc:var(--tac17-to)]. The panel underneath grows with ::details-content + interpolate-size, and it is all native <details> with no JavaScript.
A festival line-up where the open stage's header turns into a ticker: the title, doubled exactly, scrolls across an acid-green band while closed headers stay still. The loop is one --animate-tac18-marquee theme token, the pause on hover and focus is [animation-play-state:paused] behind a group variant, and motion-reduce: swaps the ticker back to a static title. <details name> means only one marquee ever runs.
Documentation that looks like the editor your readers live in: each <summary> is a // comment line with a fold chevron in a line-numbered gutter, and opening it unfolds a syntax-highlighted <pre> beneath, Tokyo Night palette included. Line numbers are a CSS counter written entirely in utilities ([counter-reset:tac19-ln], before:content-[counter(tac19-ln)]), so they re-number as folds open and close, just as VS Code does.
An invitation whose sections unfold like letter flaps. Each panel is a real 3D plane hinged at its top edge (perspective-[900px] on the item, origin-top on the flap) that swings down from rotateX(-90deg) with a paper-settle overshoot, while a crease shadow slides off the sheet. Tailwind v4's 3D transform utilities and a ::details-content transition also let it fold back up on close, something the CSS original had to skip.
A music-app playlist where the open track is the one "playing": its index number swaps for a four-bar equalizer bouncing on staggered, non-repeating loops, the title lights up in a magenta→orange gradient and the row slides open to liner notes, a progress scrubber and track metadata. Exclusive <details name>, a two-way height animation through the details-content: variant, and keyframes declared as an --animate-* token.
A digital-wallet deck: credit cards, a boarding pass and a loyalty card rest in an overlapping pile, each showing only its header strip. Pick one and it pulls out of the stack — the negative margin releases, the tilt straightens, the shadow deepens and a details sheet unrolls beneath it while the rest of the deck closes ranks. Radio-driven with has-checked:, [:has(input:checked)+&]: and a grid-rows-[0fr]→[1fr] panel.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A launch-week accordion on a near-black stage: closed days are quiet slots with a hairline seam; the open one ignites — a holographic conic gradient orbits its border, a blurred twin of the same gradient glows behind it, and an iridescent sheen sweeps once across its title. The angle is a registered @property animated only on the open item (zero idle cost); everything else, including the two-way height animation, is utilities on <details name>.
A night-mode wind-down screen for a sleep app: a slow aurora drifts behind frosted session cards, and when you open one the light gathers around it — a per-item halo in that session's own hue blooms from scale-50 to full through the glass while the card lifts. The halo is driven by has-[[open]]: on each item wrapper, so the glow "follows" the open item with no position tracking.
The foundational horizontal accordion as a careers-page studio picker: collapsed columns read their city vertically with [writing-mode:vertical-rl], and the checked radio's column animates has-checked:grow-[6] sideways while its siblings compress. A @container query flips the whole row into a stacked grid-rows-[0fr]→[1fr] accordion on narrow stages.
The portfolio showstopper as a travel journal: four full-bleed scene panels that expand on selection while their siblings sit desaturated with grayscale-[.85] brightness-[.62]. The open panel blooms into full colour, its scene eases out of a slow Ken Burns zoom, and a serif caption with EXIF chips rises from a scrim. Every scene is inline SVG — swap in a photo and nothing else changes.
A landing-page features section disguised as an accordion: four gapless, saturated colour blocks — one per product pillar — where the chosen block expands to a headline, proof copy and two metrics while the rest collapse to an icon and a rotated word. Headlines scale with the panel via text-[clamp(24px,6.2cqw,40px)], and a real CTA row sits under the section.
A magazine table of contents turned interactive: cream paper, a heavy ink rule top and bottom, hairline column rules, and a giant ghosted serif numeral on every spine. Opening a story swells the same numeral from scale-[.55] to scale-100 and tints it red while the headline, italic dek and byline set over it like an art-directed spread.
An architecture studio's selected-works switcher where every project panel is always full size, stacked in one grid cell, and the chosen one is uncovered by a [clip-path:inset(0)] curtain wipe instead of a resize. Radios live inside the rail's labels; the shell reads them with group-has-[#tac29-a:checked]/shell:, so the rail and the stage need no shared parent selector and no JavaScript. Content never reflows mid-animation — it is revealed, not stretched.
A record-shop listening wall: collapsed panels are cardboard album spines with the artist running down them, and the chosen one grows (lg:has-checked:grow-[9]) into its full sleeve while the vinyl slides half out and starts turning. The spin is declared on every disc and only [animation-play-state:running] while its radio is checked, so a closed record stops where it was instead of snapping back. Under lg the shelf becomes a vertical crate of 64px spines.
A film-festival lineup on a strip of 35mm: perforated rails run along the edges, collapsed frames show a Roman numeral and the title running down the spine, and the chosen film grows (lg:has-checked:grow-[7]) into a letterboxed still. The black bars drop in with scale-y-0 → scale-y-100, the still settles from scale-110, and the title tracks in like opening credits with tracking-[0.5em] → group-has-checked:tracking-[0.04em]. Below lg the strip turns vertical, rails and all.
Dark glass columns over one living aurora: a registered @property --tac32-hue cycles the whole palette through oklch(… var(--tac32-hue)) gradients, collapsed strips dim it to slits, and the chosen panel's glass clears (has-checked:bg-tac32-glass/20) to open a window onto it. Because the hue animates on the stage and inherits, every accent — status dots, the panel's top hairline, the icon tint — drifts in sync with the sky behind it. Stacks to a vertical list below lg.
FAQ
Frequently asked questions
How do these accordions open and close with no JavaScript at all?
They lean on the native <details> / <summary> pair. The browser toggles a boolean open attribute on <details> every time you click or press Enter on its <summary>, and it manages the expanded/collapsed state for you — no script, no aria-expanded bookkeeping. Tailwind styles the two states through the open: variant, which compiles to the [open] attribute selector. So a chevron that rotates when the panel opens is just transition-transform open:rotate-180 on the icon, and a header that changes colour is open:bg-zinc-50. The FAQ, card, and numbered-steps demos are all pure markup plus utilities. The only demos that touch state differently are the ones built on a hidden checkbox (the mobile nav hamburger), and even those stay JavaScript-free — the :checked pseudo-class drives everything.
How do I animate the open/close height smoothly instead of the content just snapping?
Native <details> has no height transition on its own — the panel appears instantly — which is the single most-searched accordion complaint. The smooth-height demo solves it without measuring anything in JavaScript. The body is wrapped in a grid row set to grid-rows-[0fr] when closed and open:grid-rows-[1fr] when open, and the inner wrapper carries overflow-hidden min-h-0. Animating a grid track between 0fr and 1fr interpolates the real content height, so a transition-[grid-template-rows] gives you the eased reveal. The min-h-0 is not optional: without it the grid child keeps its intrinsic minimum height and the panel never collapses to zero. Browsers that support interpolate-size: allow-keywords can instead transition height from 0 to auto directly, but the grid-rows technique works everywhere and needs no feature query.
How do I make only one section open at a time, closing the others automatically?
Give every <details> in the group the same name attribute — for example name="faq" on all of them. The browser then treats them as an exclusive set, exactly like radio buttons sharing a name: opening one closes whichever sibling was open. This is the entire mechanism behind the exclusive-accordion demo, and it stays zero-JavaScript. Two things to watch. First, the elements must be real DOM siblings resolving to the same name for the grouping to take; nesting a named <details> inside another one scopes it to its own level, which is actually what the nested tree-view demo relies on. Second, an exclusive group can still have every item closed — the name only prevents two being open together, it does not force one to stay open. If you need a permanently-open default, add the open attribute to one item in the markup.
How does the chevron rotate and the plus turn into a minus when a panel opens?
Both are driven by the open: variant, so the icon reacts to the same state the panel does. The rotating-chevron card puts transition-transform duration-300 open:rotate-180 on an SVG arrow — closed it points down, open it flips up, and the easing is shared with the panel reveal so they move together. The plus-to-minus trick uses two <span> bars stacked into a cross: the horizontal bar stays put, and the vertical bar gets open:rotate-90 open:opacity-0 or open:scale-y-0, so it folds away to leave a minus. Keep the icon decorative — mark it aria-hidden="true" — because the <summary> text already announces the control to assistive tech, and a labelled icon would double up. Also set list-style:none (Tailwind [&::-webkit-details-marker]:hidden marker:content-none) so the browser's default disclosure triangle does not sit next to your custom icon.
How do the horizontal accordions expand sideways instead of pushing content down?
The horizontal demos — the careers picker, the feature blocks, the album shelf, the film strip — are a flex row where each panel's width is the animated property, not height. Collapsed items are narrow and the selected one grows to fill the track, typically via flex-grow toggled on the open state with a transition-[flex-grow] or a transitioned flex-basis. The collapsed label is rotated to read vertically with [writing-mode:vertical-rl] or a rotate-180 spine so it stays legible in the thin column. A few of them swap state through a hidden radio set rather than <details>, because an exclusive one-open-column layout maps cleanly onto :checked. The common failure here is letting panels shrink below readability — pin a min-w on each column and set overflow-hidden so the inner content clips rather than wrapping and blowing out the row height during the transition.
Can I nest accordions inside each other, like the tree-view file explorer?
Yes — a <details> can live inside another <summary>'s sibling content, and the nested tree-view demo stacks four levels this way to render a file explorer. Each level is an independent disclosure, so opening a folder reveals its children, and each child can open on its own. The subtlety is the exclusive name attribute: naming is scoped per grouping, so a name you reuse across nested levels will not force a parent to close when a child opens, because they are not siblings. If you want siblings at one depth to be mutually exclusive, give just that row of items a shared name and leave the other levels unnamed or differently named. Watch indentation and your height-transition wrapper too — if every level animates grid-template-rows, a deeply nested open chain triggers several transitions at once, so keep durations short (around 200ms) or the reveal feels sluggish as it cascades down the tree.
Are these accordions keyboard accessible, and what do I still have to add?
The <details>-based demos get most of it free. The <summary> is natively focusable, lands in the tab order, shows a focus ring, and toggles on Enter and Space — behaviour you'd otherwise hand-build with role, tabindex, aria-expanded and a keydown handler. Your job is to not break it: keep a real <summary> as the first child, never wrap the header in a <button> (nested interactive elements confuse focus), and keep a visible focus-visible:ring after stripping the default marker. Mark decorative icons aria-hidden="true". One gap: a CSS height transition can leave collapsed content in the accessibility tree mid-animation, so avoid focusable links inside a visually closed panel. The checkbox-driven mobile-nav and horizontal demos need more care — add aria-controls and an aria-expanded mirror on the label, since a bare checkbox hack carries no disclosure semantics.
When should I not use a details accordion for this content?
Reach for something else when the panels are peers the user compares side by side rather than progressively discloses — that is a tab set, and the horizontal feature-blocks demo is deliberately a presentation layout, not a data control. Do not hide content behind an accordion if it must be reliably found by in-page search or read in full: collapsed <details> content is in the DOM and findable, but a user scanning the open page will simply miss it, so primary copy and critical form fields should stay visible. Skip the exclusive name grouping on a long FAQ where people genuinely want to open several answers at once and compare them — forcing others shut there is hostile. And if a section's body holds its own focus-managed widget (a date picker, a nested form flow, a video that should pause on close), the pure-CSS toggle gives you no close event to react to, so that case wants a small amount of JavaScript rather than a :checked or open hack.
