The answer
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.
How to Build an Accordion in an Interview
Should an accordion allow multiple sections open at once?
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.
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
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.