How do you make an accordion accessible?
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.
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