ishantbhurani / react-accordion

Accordion with ReactJS

Inspired by Netflix's FAQ section

Table of contents

• Overview
  • Screenshots
  • Links
  • Features
• Run Locally
• My process
  • Built with
  • What I learned
  • Useful resources
• Author
• Credits

Overview

Screenshots

Links

• Live Site URL: https://react-accordion-ishant.netlify.app/

Features

• Animation on expansion
• Icon rotate on expansion
• Dynamic height for expanded cards

Run Locally

Clone the project

git clone [e-mail]:ishantbhurani/react-accordion.git

Go to the project directory

  cd react-accordion

Run

  npm start

My process

Built with

• ReactJS
• JSX
• CSS

What I learned

• Fetching element properties (such as height) dynamically using useRef hook
• Smooth animation for card expansion

useEffect(() => {
  if (expandedID === id) {
    const height = contentRef.current.getBoundingClientRect().height;
    containerRef.current.style.height = `${height + 10}px`;
  } else {
    containerRef.current.style.height = 0;
  }
}, [expandedID]);

Useful resources

• John Smilga - dynamic height with useRef hook

Author

• Twitter - @IShaunt

Credits

• Design inspiration: Netflix