How to Build an Accordion Component in React

An Accordion component is a UI pattern where only one section can be expanded at a time, and clicking on a section will either expand it or collapse it. You may have come across this component in an FAQ section of any website.

In this article, we are going to discuss a web app, using React Hook useState(), that can expand a single section or multiple sections.

Click here for the live demo.
Click here for the Github repo

Project Setup

Create a new React app using the following command -

npx create-react-app accordian

Once the project is created, delete all files from the src folder and create data.js, Accordion.js, and styles.css files inside the srcfolder. Open the styles.cssfile and add the contents from here inside it.

Add styling to index.html

Open public/index.html and delete all the content, then copy the content from here

Load data

You can copy the contents of here to src/data.js or add your own data in the given format.

Save the component code

Open the src/Accordian.js file and add the content from here to it.

Run the application

On your terminal, execute the following command to run the application
> npm install
> npm start
In your browser, you should see a web page as shown in above image.

How code works

The return() function loops through the data imported from data.js and conditionally renders data.

{
        data && data.length > 0 ? (
          data.map((dataItem) => (
          /* 
            Rendering the conditional statements 
          */
        )))
    }

We're using the useState() hook to track the ID/IDs of the clicked section/sections. By default, all the accordion sections are collapsed.

In the file Accordian.js, two state variables selectedid and isMultiSelectionEnabled are used to track state changes-

const [selectedid, setSelectedID] = useState(null);
const [isMultiSelectionEnabled, setIsMultiSelectionEnabled] = useState(false);
const [multiple, setMultiple] = useState([]);

isMultiSelectionEnabled state variable is like a checkbox. The default value of isMultiSelectionEnabled is false. When a user clicks on Click To Enable Multiple Section Sections button, the value of this state variable turns true;

Single section selection (Button Click To Enable Multiple Section Sections is not clicked)

When the user clicks on a section to expand, the onClick handler method handleSingleSelection() gets invoked. This function sets the value of the state variable selectedid to the ID of the clicked section.

setSelectedID(currentId === selectedid ? null : currentId);

This enables the highlighted part of the following code to get executed.

and only one section gets expanded.

Multi-selection (Button Enable Multi Selection is clicked)

Clicking on the button sets the state variable isMultiSelectionEnabled to true and also invokes the onClick handler method handleMultiSelection(). This method sets the state variable multiple with the values of the IDs of all the selected sections.
The following image highlights the part of the code that gets executed.

All the selected sections get expanded.

Please note that once user clicks on the Enable Multiple Section button, the background color and text on the button changes. Text on the button says "Click To Enable Single Section Selection*, as shown in the following image.