Does this replace the live Accordion page?

No. When to collapse, single versus multiple, headings, and accordion versus tabs all live there. This page is the height.

What does reduced motion do?

Open and close at once. The chevron can jump to the end state.

Should closed content stay in the page?

Yes. Hide it, do not remove it, if you want find-in-page, print and search to keep working.

Why does the page jump after it opens?

Something inside the panel changed height late, usually an image. Reserve the space.

Morphing accordion

A morphing accordion is an accordion whose panels open and close on a height, so the page reflow is visible instead of a snap. The headings still do the real work.

Buttons and controlsBuild difficulty: Mediumheight auto

Also called Animated accordion, Height accordion, Disclosure motion, Expanding panel.

Here it is working.

Open the question. The pill becomes the panel.

For designers

The live Accordion page owns the hard parts: scan versus read-everything, single versus multiple, headings as triggers, and when this should have been tabs. This page is the open and close. Most systems already want 150 to 250 milliseconds. That is the whole motion. Keep the chevron honest. It should finish turning with the panel, not after. Closed content stays in the document so find-in-page can still reach it. If a late image changes the height, reserve the space or the layout will jump twice.

Use this when

The live Accordion rules already fit, and a snap open would feel broken.
Each heading is a real heading wrapped around a button.
You can finish the open in 150 to 250 milliseconds.
Reduced motion can cut straight to open or closed.

Reach for something else when

Everyone reads every section. Use plain headings. Skip the collapse.
The sections are peers someone picks between. Use the Tabs page or Morphing tabs.
You only wanted a hard cut. That is still an accordion. Skip this page.
The question is still the component. Start with the Accordion page.

How to build it

Build the accordion first. Native details and summary will get you the behaviour. Use the ARIA pattern when you need a height tween that works everywhere, or open state in the URL. Animate height from 0 to auto on the panel, and rotate the chevron in the same time. Overflow hidden during the tween, then release it. If single-open mode closes one panel while another opens, run both tweens together. On reduced motion, set the panel open or closed with no height tween.

Official GSAP

gsap.to height auto + borderRadius.

gsap.to(panel, { height: open ? 'auto' : 0, duration: 0.45, ease: 'power2.inOut' });
gsap.to(question, { borderRadius: open ? '20px 20px 8px 8px' : '20px', duration: 0.35 });

Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.

Common questions

Does this replace the live Accordion page?: No. When to collapse, single versus multiple, headings, and accordion versus tabs all live there. This page is the height.
How long should it take?: 150 to 250 milliseconds.
What does reduced motion do?: Open and close at once. The chevron can jump to the end state.
Should closed content stay in the page?: Yes. Hide it, do not remove it, if you want find-in-page, print and search to keep working.
Why does the page jump after it opens?: Something inside the panel changed height late, usually an image. Reserve the space.

Save as skill

A SKILL.md for this one animation: what it is, the official docs link, and a copy-paste block with the reduced-motion branch already in it. Copy gives you the same words.

Use this with your AI

Save the skill, drop it into Cursor, Claude, or whatever you use, and ask for this motion. That is all. The skill tells the agent to open this page, watch the working demo, and match it.

Last reviewed 26 AUG 2026

Next: Morphing tabs