Building a Collapsible FAQ Accordion in React

Hey there, fellow coder! Welcome to another coding adventure on sagarkunwar.com.np! Today, we’re diving into a project that not only boosts your React skills but also adds a nifty feature to your app or website: a collapsible FAQ accordion.

You might have seen these accordions in many sites where questions expand upon clicking to reveal the answer and collapse when clicked again or when another question is expanded. They’re not just fancy but are super useful for organizing content in a user-friendly way. So, let’s break it down step by step!

Getting Started: Setting Up Your React App

Before we create our accordion, we’ll need to set up a React app. If you haven’t done this before, don’t worry – it’s straightforward.

1. Create a New React Project:
Open your terminal and type:

bash
   npx create-react-app faq-accordion
   cd faq-accordion
   

2. Start the Development Server:
Once your app is set up, navigate into the project directory and run:

bash
   npm start
   

Now, you should see a new browser window with the default React app running. Great job so far! 🎉

Step 1: Understanding the Basics

Before we dive into coding, let’s understand what exactly we are creating.

An FAQ accordion generally consists of pairs of questions and answers. When a question is clicked, its corresponding answer is displayed (expanded). If clicked again, or if another question is selected, it collapses.

We’ll use React’s state to manage which question is currently expanded. This way, React will handle what’s visible on the page.

Step 2: Creating the Accordion Component

Let’s get our hands dirty and create a new component that will handle the accordion logic.

1. Create a New Component:
Inside your src folder, create a new file named Accordion.js.

2. Component Boilerplate:
Start with a basic functional component:

jsx
   import React, { useState } from 'react';

   const Accordion = ({ data }) => {
     const [activeIndex, setActiveIndex] = useState(null);

     const handleToggle = (index) => {
       setActiveIndex(activeIndex === index ? null : index);
     };

     return (
       

         {data.map((item, index) => (
           

             
 handleToggle(index)}>
               {item.question}
             

             
accordion-content ${activeIndex === index ? 'show' : ''}}>
               {item.answer}
             

           

         ))}
       

     );
   };

   export default Accordion;
   

3. Explanation:
– We use the useState hook to keep track of which accordion item is active.
– When a title is clicked, handleToggle is called, changing the active index.
– If the clicked item is already active, it will be set to null (collapsed).
– The accordion-content div toggles its display based on the active state.

Step 3: Styling Your Accordion

Let’s add some styles to make sure our FAQ accordion looks neat and functional. Create a Accordion.css file next to your Accordion.js, and add the following styles:

css
.accordion {
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
  max-width: 600px;
  margin: 20px auto;
}

.accordion-item {
  border-bottom: 1px solid #ddd;
}

.accordion-title {
  padding: 15px;
  background: #f7f7f7;
  cursor: pointer;
}

.accordion-content {
  display: none;
  padding: 15px;
  background: #fff;
}

.accordion-content.show {
  display: block;
}

Applying the Styles:

Don’t forget to import the CSS in your Accordion.js:

jsx
import './Accordion.css';

Step 4: Testing Your Accordion

We’re nearly done! Go ahead and use your Accordion component in App.js to see it in action.

1. Edit App.js:

jsx
   import React from 'react';
   import Accordion from './Accordion';

   function App() {
     const faqData = [
       { question: 'What is React?', answer: 'React is a JavaScript library for building user interfaces.' },
       { question: 'Why use React?', answer: 'It makes creating interactive UIs a breeze.' },
       { question: 'How do you use React?', answer: 'By creating components and composing them to build applications.' }
     ];

     return (
       

         
FAQ

         
       

     );
   }

   export default App;
   

2. Explanation:
Simply import the Accordion component and pass some FAQ data as props to see how it works.

Summary

And there you have it – a simple yet effective collapsible FAQ accordion in React! 🎉

We walked through setting up a basic React app, created a dynamic accordion component using state, and styled it to look clean and professional. Hopefully, this project helped you sharpen your React skills.

Optional Practice Ideas:

– Try adding animation when opening or closing the accordion items.
– Enhance the UI with icon indicators for open/closed states.
– Implement accordions with different themes or styles (like dark mode).

Feel free to ask any questions in the comments or share your renditions of the project!

Happy coding, and see you in the next tutorial! ✨