Motion Lexicon
Search/
中文
System
Motion component

Accordion / Collapse

Coordinate height, opacity, and icon state for clear disclosure transitions.

Preview

Live preview

A section smoothly expands and collapses its height to show or hide content.

Preview
Accordion / Collapse
Expandable content remains available to keyboard and assistive technology users.
Authoritative vocabulary

Definition and close-term distinctions

English definitions are preserved verbatim from Animation Vocabulary; translations and distinctions help you choose precisely.

Canonical termaccordion-collapse

Accordion / Collapse

手风琴 / 折叠
Authoritative definition

A section smoothly expands and collapses its height to show or hide content.

Chinese translation

一个区域平滑地展开或收起高度，以显示或隐藏内容。

Browse all 91 terms
Design contract

Decide before this motion ships

Purpose, frequency, trigger, timing, interruptibility, and gesture rules shape the implementation.

Purpose

Expand or collapse supporting content in place with predictable spatial change.

Frequency

Use for medium- to high-frequency disclosure, keeping repeated interactions around 180–260ms.

Trigger

Trigger from heading-button click, tap, Enter, or Space, updating aria-expanded in sync.

Enter / exit

Grow height and opacity together on expand; soften content before releasing layout space on collapse.

Interruptibility

Reverse immediately from the current height without waiting for expansion or collapse to finish.

Gesture and keyboard

Make the full heading row a target with at least 44px on mobile, keeping keyboard focus on the trigger.

Reduced-motion strategy

Switch content visibility and layout height immediately while preserving icon and aria-expanded state.

Output

Copy into your interface

Current parameters update visual-state CSS, semantic HTML, the required vanilla JS runtime, and an interaction prompt.

Updates with parameters
motion.css
.motion-demo.motion-demo--accordion-collapse {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 34rem);
  min-height: 15rem;
  padding: 2rem;
  overflow: hidden;
  color: #18181b;
  background: #fafafa;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  isolation: isolate;
}

.motion-demo.motion-demo--accordion-collapse *, .motion-demo.motion-demo--accordion-collapse *::before, .motion-demo.motion-demo--accordion-collapse *::after {
  box-sizing: border-box;
}

.motion-demo.motion-demo--accordion-collapse .motion-surface {
  position: relative;
  display: grid;
  gap: 0.65rem;
  width: min(100%, 18rem);
  padding: 1.25rem;
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 10px 28px rgb(0 0 0 / 7%);
}

.motion-demo.motion-demo--accordion-collapse .motion-line {
  display: block;
  width: 100%;
  height: 0.5rem;
  background: #e4e4e7;
  border-radius: 999px;
}

.motion-demo.motion-demo--accordion-collapse .motion-line:last-child { width: 62%; }

.motion-demo.motion-demo--accordion-collapse .motion-button {
  position: relative;
  min-height: 2.75rem;
  padding: 0.75rem 1.1rem;
  color: white;
  font: inherit;
  font-weight: 700;
  background: #18181b;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.motion-demo.motion-demo--accordion-collapse .motion-button:focus-visible { outline: 3px solid rgb(37 99 235 / 32%); outline-offset: 3px; }

.motion-demo.motion-demo--accordion-collapse .motion-action-row {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.motion-demo.motion-demo--accordion-collapse .motion-replay-scene {
  width: min(100%, 22rem);
  display: grid;
  place-items: center;
}

.motion-demo.motion-demo--accordion-collapse .motion-pausable-scene {
  width: min(100%, 22rem);
  display: grid;
  place-items: center;
}

.motion-demo.motion-demo--accordion-collapse button.motion-surface {
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.motion-demo.motion-demo--accordion-collapse .motion-replay-button,
.motion-demo.motion-demo--accordion-collapse .motion-undo-button,
.motion-demo.motion-demo--accordion-collapse .motion-dismiss-button,
.motion-demo.motion-demo--accordion-collapse .motion-pause-button {
  min-height: 2.75rem;
  padding: 0.65rem 0.9rem;
  color: #18181b;
  font: 650 0.78rem/1 ui-sans-serif, system-ui, sans-serif;
  background: #ffffff;
  border: 1px solid #d4d4d8;
  border-radius: 7px;
  cursor: pointer;
}

.motion-demo.motion-demo--accordion-collapse .motion-replay-button:focus-visible,
.motion-demo.motion-demo--accordion-collapse .motion-undo-button:focus-visible,
.motion-demo.motion-demo--accordion-collapse .motion-dismiss-button:focus-visible,
.motion-demo.motion-demo--accordion-collapse .motion-pause-button:focus-visible,
.motion-demo.motion-demo--accordion-collapse [data-reorder-item]:focus-visible,
.motion-demo.motion-demo--accordion-collapse [data-swipe-target]:focus-visible {
  outline: 3px solid rgb(37 99 235 / 32%);
  outline-offset: 3px;
}

.motion-demo.motion-demo--accordion-collapse .motion-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.motion-demo.motion-demo--accordion-collapse .motion-ripple-ink {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  background: rgb(255 255 255 / 72%);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  opacity: 0;
}

.motion-demo.motion-demo--accordion-collapse .motion-state-stack { position: relative; width: min(100%, 18rem); height: 9rem; }
.motion-demo.motion-demo--accordion-collapse .motion-state { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; background: #ffffff; border: 1px solid #e4e4e7; border-radius: 8px; }
.motion-demo.motion-demo--accordion-collapse .motion-state--to { background: #18181b; color: white; }

.motion-demo.motion-demo--accordion-collapse .motion-scroll-track > span { color: #71717a; font: 600 0.72rem/1.2 ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.motion-demo.motion-demo--accordion-collapse .motion-orbit-item { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: white; background: #2563eb; border-radius: 50%; }
.motion-demo.motion-demo--accordion-collapse .motion-text-stack { position: relative; width: min(100%, 18rem); min-height: 4rem; }
.motion-demo.motion-demo--accordion-collapse svg { width: min(100%, 20rem); height: auto; }

.motion-demo.motion-demo--accordion-collapse details { width: min(100%, 20rem); background: #ffffff; border: 1px solid #e4e4e7; border-radius: 8px; overflow: hidden; }
.motion-demo.motion-demo--accordion-collapse summary { padding: 1rem; cursor: pointer; font-weight: 650; }
.motion-demo.motion-demo--accordion-collapse .motion-disclosure-content { min-height: 140px; padding: 0 1rem 1rem; overflow: hidden; }
.motion-demo.motion-demo--accordion-collapse details[open] .motion-disclosure-content { animation: motion-accordion-collapse 220ms cubic-bezier(0.23, 1, 0.32, 1) both; }
@keyframes motion-accordion-collapse { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@keyframes motion-accordion-collapse-reduced-fade {
  from { opacity: 0.84; }
  to { opacity: 1; }
}

.force-reduced-motion .motion-demo.motion-demo--accordion-collapse {
  animation: motion-accordion-collapse-reduced-fade 160ms cubic-bezier(0.23, 1, 0.32, 1) both !important;
}

.force-reduced-motion .motion-demo.motion-demo--accordion-collapse *,
.force-reduced-motion .motion-demo.motion-demo--accordion-collapse *::before,
.force-reduced-motion .motion-demo.motion-demo--accordion-collapse *::after {
  animation: none !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-property: opacity, color, background-color, border-color !important;
  transition-duration: 160ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}

.force-reduced-motion .motion-demo.motion-demo--accordion-collapse .motion-button,
.force-reduced-motion .motion-demo.motion-demo--accordion-collapse [data-reorder-item],
.force-reduced-motion .motion-demo.motion-demo--accordion-collapse [data-swipe-target],
.force-reduced-motion .motion-demo.motion-demo--accordion-collapse [data-spring-target] {
  transform: none !important;
}

.force-reduced-motion .motion-demo.motion-demo--accordion-collapse .motion-path { stroke-dashoffset: 0 !important; }
.force-reduced-motion .motion-demo.motion-demo--accordion-collapse .motion-word--from { opacity: 0 !important; visibility: hidden; }
.force-reduced-motion .motion-demo.motion-demo--accordion-collapse .motion-word:not(.motion-word--from) { opacity: 1 !important; filter: none !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .motion-demo.motion-demo--accordion-collapse {
    animation: motion-accordion-collapse-reduced-fade 160ms cubic-bezier(0.23, 1, 0.32, 1) both !important;
  }

  .motion-demo.motion-demo--accordion-collapse *, .motion-demo.motion-demo--accordion-collapse *::before, .motion-demo.motion-demo--accordion-collapse *::after {
    animation: none !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color !important;
    transition-duration: 160ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .motion-demo.motion-demo--accordion-collapse .motion-button,
  .motion-demo.motion-demo--accordion-collapse [data-reorder-item],
  .motion-demo.motion-demo--accordion-collapse [data-swipe-target],
  .motion-demo.motion-demo--accordion-collapse [data-spring-target] {
    transform: none !important;
  }

  .motion-demo.motion-demo--accordion-collapse .motion-path { stroke-dashoffset: 0 !important; }
  .motion-demo.motion-demo--accordion-collapse .motion-word--from { opacity: 0 !important; visibility: hidden; }
  .motion-demo.motion-demo--accordion-collapse .motion-word:not(.motion-word--from) { opacity: 1 !important; filter: none !important; transform: none !important; }
}
Review notes

Pre-delivery review

  • Avoid a non-interpolable height:auto implementation that snaps.
  • Move focus out of content before it becomes hidden.
Accessibility

Keep information accessible

Reduced motion

Switch content visibility and layout height immediately while preserving icon and aria-expanded state.

Parameters

Parameter reference

ParameterRange / optionsDefaultPurpose
duration80ms–1200ms220msControls the time required for one motion cycle.
height60px–320px140pxAdjusts content height.
easeSoft / Snap / Calm / LinearSoftControls how velocity changes over time.
Related entries
CrossfadeMorphDirection-aware transition