FAQ accordion

An FAQ accordion groups questions into expandable rows, allowing visitors to reveal the answers they need.

Browse more examples →
From the collection

What it means

This reduces the initial visual length of a page while keeping supporting detail nearby. It is most useful for genuine questions that arise after the main explanation. The control should clearly indicate whether its answer is open and work with a keyboard as well as a pointer.

Use it in practice

Use recognizable questions and concise answers. Implement the disclosure with semantic controls and expose expanded state to assistive technology.

Watch out for

Do not hide the basic offer or essential pricing conditions in an accordion. A screenshot only shows the visual treatment, not the accessibility of its implementation.