This is a solution to challenge name
- ReactJs
- Tailwind CSS
- Custom animation
- Semantic HTML
- Flexbox...
I learned how to use useEffect and useRef. I used them to get the accordion content height and set it to a CSS variable for animation.
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
document.documentElement.style.setProperty(
"--accordion-height",
`${ref.current?.scrollHeight}px`,
);
}, [open]);