Skip to main content
Frontend Glossary

UI components · Layout containers

Collapse

Also called: Accordion, Collapsible, Expandable panel, Disclosure

A set of panels whose titles you click to expand or collapse the content, used to split long content into sections people open as needed.

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

Build an FAQ collapse: one question per row, with a down arrow on the right. Clicking a question expands its answer and rotates the arrow 180 degrees, with a height transition when expanding and collapsing. Start with all rows collapsed, and only allow one open at a time (accordion mode). Make the whole title row clickable, and support the keyboard.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Collapse is what you need.

Use Collapse when

  • Q&A content like an FAQ, where users only care about a few of the items
  • Advanced options on a settings page that people don't need to see until they do
  • Long content on mobile that needs to be split up to cut down on scrolling
  • You need to open two sections at the same time to compare them

Pick something else when

  • Several equally important blocks that users switch between often; tabs are more direct

  • The content itself is short, so collapsing it just adds an extra click

  • Users need to scan everything at a glance, like when comparing key specs

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Collapsing the most important info on the page, so users never notice it

  2. 02

    Only the arrow icon is clickable; clicking the title row does nothing

  3. 03

    Nesting collapses inside collapses so deeply that content is hard to find

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

Several panels stacked vertically. Each has a clickable title row (with an arrow) and a content area that expands and collapses.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

A collapse splits content into sections. Each section shows only a title row with an arrow next to it. Click the title to expand the content below, and click again to collapse it. If only one section can be open at a time, it's called an accordion. It's common in FAQs, advanced options on settings pages, and specs on product pages. The native HTML <details> and <summary> elements give you the simplest version.

It's most often confused with Tabs. Tabs put several blocks of content side by side and show one at a time, which suits blocks that are equally important and that users switch between. A collapse stacks vertically, lets you open several sections at once to compare them, and works better on phones held upright. If the content is only three to five lines, just showing it is easier to find than hiding it.

Developer info
Term ID
component-collapse
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • details
  • .ant-collapse
  • .el-collapse
  • [class*="MuiAccordion-root"]
  • .arco-collapse
  • .t-collapse
  • .n-collapse
  • [data-slot="accordion"]
  • .accordion
Priority
1 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026