Accordion

A vertical list of headings. Click one to open or close the content hidden under it.

Also called: accordion, expandable, expandable list, expander, collapsible, collapse, expand, spoiler, faq, frequently asked questions, questions and answers, plus to expand

What it is for

It fits a lot of information into a small space. You scan the headings and open only what interests you, which keeps the page from feeling cluttered.

Where you see it

• FAQ sections — common questions, hidden until you click
• Complex filters — collapsible groups of options
• Mobile navigation — nested items in a multi-level menu

What it is called in code

• <details> + <summary>
• Accordion

See also

• Tabs — A row of labels above a block of content. Click one and the block shows that section.
• Card — A rectangular block that gathers everything about one thing: a photo, a name, a price, a button.
• Hamburger menu — An icon of three horizontal lines that hides the main menu off-screen until you tap it.