accordion-collapse

Accordion / Collapse

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

Preview

A disclosure region animates its visible extent while content is opened or closed.

Expandable content remains available to keyboard and assistive technology users.

Implement Accordion / Collapse: Coordinate height, opacity, and icon state for clear disclosure transitions. Use Duration 220ms, Content height 140px, Easing soft. Trigger it once when state changes and keep it replayable. Use semantic HTML, scope CSS to .motion-demo--accordion-collapse. Provide equivalent low-motion behavior for prefers-reduced-motion and .force-reduced-motion.

markup.html

<div class="motion-demo motion-demo--accordion-collapse" data-motion="accordion-collapse" aria-label="Accordion / Collapse demo">
  <details open><summary>Accordion / Collapse</summary><div class="motion-disclosure-content">Expandable content remains available to keyboard and assistive technology users.</div></details>
</div>

motion.css

.motion-demo.motion-demo--accordion-collapse {
  box-sizing: border-box;
  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: 16px;
  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: 16px;
  box-shadow: none;
}

.motion-demo.motion-demo--accordion-collapse .motion-surface strong { font-weight: 500; }

.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: 999px;
  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: 8px;
  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: 16px; }
.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: 16px; 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; }
}

Learn more

Before 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.

Accessibility

Reduced motion

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

Parameter reference

Parameter	Range / options	Default	Purpose
`duration`	80ms–1200ms	220ms	Controls the time required for one motion cycle.
`height`	60px–320px	140px	Adjusts content height.
`ease`	Soft / Snap / Calm / Linear	Soft	Controls how velocity changes over time.