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.
Accordion · Expand only one at a time
Enter "Project Settings → Members", click "Invite Members" and enter the other party's email address.
Yes. You can export CSV or JSON from Project Settings.
Independent · Open as many as you want
Project settings → Basic information, automatically saved after modification.
Yes, just turn on the "Deadline" in the project settings.
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 questions
    How do I reset my password?▾
    Which payment methods are supported?▸
  • Advanced settings
    Notifications
    Advanced settings▸
  • Long supporting details
    Basic 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 panels
    About this project▾
    One content group doesn’t need an extra expand step
  • Make the heading too vague to predict the content
    AllAwaiting paymentCompleted
  • Collapse everything when most people need it open
    Level 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
Settings
Account and security▸
Privacy▾
Who can see my updates
Blacklist management
About▸
Further reading
Accordion PatternWAI-ARIA APG ↗