How do you animate an accordion smoothly in JavaScript?
Use max-height transition. Set max-height: 0 and overflow: hidden by default. On open, set max-height to scrollHeight + 'px'. The CSS transition: max-height 0.3s ease animates the change smoothly without knowing the content height.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in How to Build an Accordion in an Interview
Create headers and content sections. Toggle the content's max-height on click (null for closed, scrollHeight for open). Close other sections when one opens (or allow multiple). Use CSS transition on max-height for smooth animation. Add ARIA and keyboard support.
It depends on the requirements. Some accordions allow only one open at a time (close others when one opens). Some allow multiple. Ask the interviewer. Implement the one they want, or make it configurable.
Add role='button' and tabindex='0' to headers. Add aria-expanded (true/false) and aria-controls. Support keyboard: Enter and Space to toggle. This makes the accordion usable with keyboard and screen readers.
Still have questions?
Browse all our FAQs or reach out to our support team