moutafatin / frontendmentor-faq-accordion

Frotnend Mentor FAQ accordion challenge

Frontend Mentor - {Challenge name}

This is a solution to challenge name

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources

Overview

Screenshots

Links

Live preview

My process

Built with

• ReactJs
• Tailwind CSS
• Custom animation
• Semantic HTML
• Flexbox...

What I learned

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]);