An accordion menu is a set of stacked headers where clicking one expands its content and usually collapses the others, so only one panel is open at a time. The name comes from the musical instrument that folds and unfolds.
The classic example is a Frequently Asked Questions block. You see a tidy list of questions, you tap the one you care about, and the answer slides open underneath while the rest stay folded away. That keeps a page with twenty questions from becoming an endless wall of text. A small micro-interaction, like a chevron that rotates as the panel opens, tells people the section is expanding and which one is active.
Accordions are close cousins of the dropdown menu, but a dropdown floats over the page while an accordion pushes the content below it down. There is a catch: anything hidden inside an accordion is less likely to be read, so it is the wrong choice for information every visitor truly needs. They also have to be operable by keyboard to stay accessible.
Worth knowing too: content folded inside a closed panel is still in the page’s HTML, so search engines can read it and the visitor can find it with the browser’s in-page search. But links and headings buried in a collapsed section carry less visual weight, which is one more reason not to hide your most important message there. Keep the answers short, and let the header text alone tell people what they will get if they open it.
At TopDevs we reach for accordions to tame long FAQ and specification pages, and we make sure each panel opens with the keyboard so the pattern stays usable for everyone.
