- Navigate the questions and hide/show answers using keyboard navigation alone
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
Frontend Mentor Challenge Spec
The useEffect re-renders the content everytime the isOpen state changes. When isOpen is true, the maxHeight of the div on which contentRef variable is attached to is set to the scroll height of the content, otherwise, the maxHeight is 0px (when the accordion is collapsed).
useEffect(() => {
if(contentRef.current) {
contentRef.current.style.maxHeight = isOpen ? `${contentRef.current.scrollHeight}px` : '0px';
}
}, [isOpen])