Comparison file · disclosure
Accordion vs Disclosure vs Collapsible
Separate a multi-section structure from one show-or-hide relationship and a generic collapse behavior.
Run the diagnosisFast decision
Start with the behavior that changes the build
Accordion
An accordion may allow one or multiple panels open. Do not assume mutual exclusivity.
Open field note ↗Disclosure
If several titled sections form one structure, use an Accordion.
Open field note ↗Collapsible
Choose a specific semantic pattern when the relationship is actually a Disclosure or Accordion.
Open field note ↗Behavior matrix
Compare contracts, not silhouettes
| Decision | Accordion | Disclosure | Collapsible |
|---|---|---|---|
| Structure | Multiple titled sections. | One control and one region. | Generic expandable region. |
| Control relationship | Each heading controls its own panel. | One button directly controls one region. | Must be defined by the surrounding component. |
| Keyboard | Enter or Space toggles; Tab reaches controls; optional arrow navigation must be consistent. | Enter or Space activates the button. | The control is keyboard operable and communicates state. |
| Persistence | Expanded state may persist during the page session if useful. | State may persist during the current task if helpful. | State may persist as a layout preference when explicitly designed. |
| Semantic contract | composite pattern | semantic pattern | generic behavior |
Discriminating questions
Ask only what changes the result
- Is this a set of multiple titled sections that users expand independently?Yes / No
- Does one button directly reveal or hide one related region?Yes / No
Implementation consequences
Turn the comparison into a build decision
The final choice must explain both the selected contract and the alternatives it excludes.
Name the task
Separate a multi-section structure from one show-or-hide relationship and a generic collapse behavior. Write the user goal before choosing any component from a library.
Freeze the decisive dimensions
For this group, compare Structure, Control relationship, Keyboard, Persistence, Semantic contract. Do not allow visual similarity to replace those requirements.
State the exclusion
Record why the closest rejected pattern fails. That reason helps a coding agent avoid silently substituting a familiar but incompatible component.
Verify the behavior
Open the selected pattern reference, copy its acceptance checks, and test focus, keyboard, dismissal, placement, content, and mobile behavior in the real interface.
Frequently asked questions
Accordion vs Disclosure vs Collapsible questions
Direct answers based on the reviewed behavior contract above.
What is the main difference between Accordion, Disclosure, Collapsible?
Separate a multi-section structure from one show-or-hide relationship and a generic collapse behavior. The decisive dimensions on this page are Structure, Control relationship, Keyboard, Persistence, Semantic contract. Read each column as a behavior contract, not as a visual style recommendation.
How do I choose among Accordion, Disclosure, Collapsible?
Begin with the required user task, then answer the discriminating questions above. Choose the pattern whose purpose and behavior match the evidence, and explicitly reject alternatives whose focus, input, modality, persistence, or structural contract would break the task.
Can two of these terms apply to the same interface?
Sometimes. This taxonomy includes semantic patterns, composite patterns, presentation forms, behavior variants, message channels, and generic behavior labels. A presentation term and a semantic contract can coexist, so specify each required property instead of forcing every term into a flat either-or choice.
How should I verify the final implementation?
Open the selected pattern reference and run its observable checks. At minimum, confirm the configured trigger, dismissal, focus, keyboard behavior, interactive content, placement, and mobile adaptation. Also verify the linked official or first-party source against the library you ship.