Collapsible FAQ panels

CSS Accordion Generator

Build a collapsible FAQ or accordion with your own questions and answers, then copy the ready-to-use HTML, CSS and JavaScript.

Ready-to-use HTML + CSS + JS

How it works

1

Edit each question

Type your own question and answer text for every accordion item.

2

Choose open behavior

Allow several items open at once, or force only one at a time.

3

Copy the code

Get accessible, keyboard-friendly HTML, CSS and JavaScript.

FAQ

How does the smooth open/close animation work?

Each panel's max-height transitions between 0 and its measured scrollHeight, which a small script updates whenever a panel opens or closes.

What does single-open mode do?

When enabled, opening one item automatically closes any other open item, so only one answer is visible at a time.

Is the generated accordion accessible?

Each question is a real button with aria-expanded reflecting its open state, so screen readers announce the current state correctly.

Try other tools

TABSCSS Tabs GeneratorBuild a tabbed content switcher. MODALCSS Modal GeneratorBuild a styled dialog popup. TIPTooltip BuilderDesign accessible tooltips.