Why use max-height for accordion animation instead of height?
Because height: auto cannot be animated with CSS transitions. max-height can. Set max-height to a large value (like scrollHeight) when open, and 0 when closed. The transition animates smoothly.
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.
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.
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.
Still have questions?
Browse all our FAQs or reach out to our support team