Two-Column FAQ — Free HTML CSS JS Accordion Snippet

A long single-column FAQ pushes important questions far down the page; a two-column layout fits twice as many above the fold and reads faster. This component is a responsive two-column FAQ where each question is an independently expandable accordion item, the columns collapse to one on mobile, and the open/close animation uses the modern grid-template-rows technique that animates to a content's natural height without measuring it in JavaScript. It is built in semantic HTML, CSS, and a small data-driven script.

The two-column grid that collapses

The FAQ items live in a CSS grid with grid-template-columns: 1fr 1fr and align-items: start, which is the important detail: start alignment lets each item size to its own content height rather than stretching to match its row neighbour, so an expanded question on the left does not drag an empty gap onto the collapsed one on the right. A single media query at 620px switches the grid to one column, so on phones the FAQ becomes a familiar vertical stack. Each item is its own card with a border that brightens and lifts with a shadow when open.

Animating height with grid-template-rows

The hard part of any accordion is animating to "auto" height — you cannot CSS-transition to height: auto. The classic workarounds are measuring scrollHeight in JavaScript or animating max-height to a guessed value (which makes the timing wrong for short or long answers). This component uses the modern fix instead: the answer is a grid container set to grid-template-rows: 0fr, and opening transitions it to 1fr. An inner wrapper with overflow: hidden clips the content as the row grows. Because 0fr to 1fr is an animatable transition, the answer smoothly expands to exactly its natural height — no measurement, no magic numbers, correct for any answer length.

The rotating plus-to-cross icon

Each question shows a plus icon that rotates 45 degrees into a cross when its item opens, driven purely by transform: rotate(45deg) on the .open state with a CSS transition. Using a single plus that rotates — rather than swapping a plus SVG for a minus SVG — gives a continuous, satisfying motion and means there is no icon-swap flicker. The whole question row is a real <button>, so it is keyboard-focusable and operable with Enter or Space out of the box.

Independent accordion items

Unlike a single-open accordion, every item here toggles independently — opening one does not close the others, which suits an FAQ where a visitor may want several answers open at once for comparison. The click handler simply toggles the .open class on that item and flips its aria-expanded. If you prefer single-open behaviour (only one answer visible at a time), the FAQ section explains the one-line change.

Accessible disclosure wiring

Each question button has aria-expanded reflecting its state and aria-controls pointing at its answer's id; the answer region has role="region" and aria-labelledby pointing back at the question. This is the WAI-ARIA disclosure pattern, so screen readers announce each question as an expandable control and associate the revealed text with the question that owns it. The ids are generated per item in the render loop, so they stay unique no matter how many questions you add.

Customisation

The FAQ is driven by a FAQS array of { q, a } objects — add, remove, or reorder questions there and the grid rebuilds. Items fill the two columns in source order (left, right, left, right…), so order your most important questions first. Swap the #6366f1 accent used by the eyebrow, icon, and open-state border, change the 0.3s expand duration, and edit the header eyebrow, title, and subtitle to match your section. To add a JSON-LD FAQ schema for SEO, mirror the same FAQS array into a @type: FAQPage script — the data is already in the right shape.