Advanced
Round 2: the accordion to height: auto
A timed round. The panel opens and closes instantly with display. A browser cannot animate height: auto.
Animate the opening and closing over 250 ms without measuring anything in JavaScript, and without a jump when the visitor clicks again half way. Reduced motion: no animation.
What Check tests
- The button says whether the panel is open
- Three frames into opening, the panel is part open
- It ends exactly as tall as its content
- Closing, then re-opening at 100 ms, never jumps
- Reduced motion: no animation, same end state
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
animations
0.00s0.10s0.20s0.30s0.40s0.50s0.60s0.70s0.80s0.90s
Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.
frames
Console
Nothing logged yet.