Collapse
You might say
There are a lot of questions. Show just the question first, then let people open it to see the answer.
Hide secondary details until the user asks for themA collapse panel shows a heading first and expands the body on request. It suits FAQs and advanced settings. Do not hide warnings, required rules, or anything people must see before they act.
You can say this to an AI Agent
Organize FAQ answers as collapsible panels, but keep the seven-day refund window persistently visible near price and purchase controls. Make each heading summarize its answer, then test keyboard toggling and long mobile question wrapping.
Collapse≠Accordion
A collapse panel is any content that can expand and close. An accordion is usually a group of collapse panels and often allows only one open panel at a time.
When to use it
- Frequently asked questionsHow do I reset my password?▾Which payment methods are supported?▸
- Advanced settingsNotificationsAdvanced settings▸
- Long supporting detailsBasic information▸Member permissions▾
- Optional sections in a compact page▸ More settingsCollapse secondary details to shorten the page
When NOT to use it
- Hide critical information or a required action⚠ Your account may be at risk. Take action now.▸A critical notice is collapsed by default, so people miss it on arrival
- Nest several levels of collapsible panelsAbout this project▾One content group doesn’t need an extra expand step
- Make the heading too vague to predict the contentAllAwaiting paymentCompleted
- Collapse everything when most people need it openLevel 1 group▾Level 2 group▾Level 3 group…▸
Anatomy
How to invite team members? ▾Enter "Project Settings → Members", click "Invite Members" and enter your email address.
A container for a set of collapsible sections
The title row; the whole row is clickable
Indicates whether the section is expanded or collapsed
The content revealed after expansion
Variants
Accordion
How to invite team members? ▾
Expand only one panel at a time.
Does it support exporting data? ▸
When only one section should expand at a time and the page should stay compact.
Ghost
How to invite team members? ▾
Remove the border and blend into the background of the page.
Does it support exporting data? ▸
When you want a subtler border that blends into the page background.
Card
How to invite team members? ▾
One card per section.
Does it support exporting data? ▸
When each section is independent and grouping needs emphasis.
Typical use cases
FAQ
Help Center
How do I reset my password? ▾
Go to Account Settings → Security, select Reset Password, and follow the instructions in the email. It usually takes about a minute.
What payment methods are supported? ▸
How do I request an invoice? ▸
Advanced options
Notification settings
Message notification
Weekly email report
Advanced settings (DND period, Webhook)▸
Product details
Order SF1024888Signed
Actual payment ¥329.00 · 2026-07-18 Order
Product details (3 pieces)▾
Mechanical keyboard ×1¥249.00
Keycap set ×2¥80.00
Troubleshooting guide
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check