Smooth FAQ accordion open/close animation - #3997
Merged
Merged
Conversation
Use a fixed 250ms panel transition so open/close speed is consistent and a touch slower than MUI's default "auto", addressing feedback that the expansion felt abrupt. Also document the 16px-open / 24px-closed question-to-answer spacing and why the summary-content margin has no CSS transition (Chrome leaves it stuck at the start value on first expand).
OpenAPI ChangesNo changes detected Unexpected changes? Ensure your branch is up-to-date with |
Contributor
There was a problem hiding this comment.
Copilot review overview
🟢 Approval recommended
The focused animation change is valid and introduces no correctness issues.
Review effort: Balanced
Findings: None
What changed in this PR
Polishes FAQ accordions with consistent, smoother expansion and spacing.
Changes:
- Sets a fixed 250ms accordion transition.
- Documents intentional expanded spacing and Chrome workaround.
| File | Description |
|---|---|
frontends/main/src/app-pages/ProductPages/FaqsSection.tsx |
Adjusts FAQ transition timing and spacing documentation. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
daniellefrappier18
approved these changes
Sep 28, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What are the relevant tickets?
https://github.com/mitodl/hq/issues/13284
Follow-up to the FAQ product-page feature (merged in #3954 / #3969). Addresses @mbilalmughal's feedback (relaying @steven-hatch) that the accordion content shifts slightly on expand and the transition feels abrupt — asking for a smoother, slightly slower animation: https://github.com/mitodl/hq/issues/13284#issuecomment-5865435081
Description (What does it do?)
Polishes the FAQ accordion open/close animation on course & program product pages.
slotProps={{ transition: { timeout: 250 } }}) so the open/close speed is consistent and a touch slower than MUI's default"auto", for a smoother, more natural feel.Screenshots (if appropriate):
[attach screenshots — closed vs. open FAQ]
How can this be tested?
Setup — add FAQs in MITx Online (Wagtail admin):
Verify on MIT Learn:
/courses/course-v1:…) and scroll to FAQs.