How to add accordion in react js?

March 27, 2024

Hi Friends 👋,

Welcome To aHoisting!

To add accordion in react js, you can use <Accordion title="Accordion 1">. It will add accordion in react js.

Today, I am going to show you, how to add accordion in react js.

Table of contents

Install and create a new React app.
Import react component.
Create a Component.

Let’s start with the first step.

Step 1: Install and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import react component.

After installing, you have to import your React component. To do this, add the following line to the top of your component file.

import React from 'react';
import Accordion from './Accordion';
import React, { useState } from 'react';

Step 3: Create a Component.

you can use <Accordion title="Accordion 1"> and add accordion in react js.

<div className="app">
      <Accordion title="Accordion 1">
        {/* Content of Accordion 1 */}
         <p>Very poor Waterpark
          Pools are not cleaned and are slippery
          Slide is broken
          Broken slide hurts my family member
          Biggest slide is closed
          Limited ride on games 
          Means one game only one time you can ride and there are only four rides</p>
      </Accordion>
      <Accordion title="Accordion 2">
        {/* Content of Accordion 2 */}
        <p>Very poor Waterpark
         Pools are not cleaned and are slippery
         Slide is broken
         Broken slide hurts my family member
         Biggest slide is closed
         Limited ride on games
         Means one game only one time you can ride and there are only four rides</p>
      </Accordion>
</div>

Define the add accordion example.

The below code is an example of a React. You have to import React. and use <Accordion title="Accordion 1"> to add accordion in react js.

App.js


import React from 'react';
import Accordion from './Accordion'; // Assuming Accordion.js is in the same directory

const App = () => {
  return (
    <div className="app">
      <Accordion title="Accordion 1">
        {/* Content of Accordion 1 */}
         <p>Very poor Waterpark
          Pools are not cleaned and are slippery
          Slide is broken
          Broken slide hurts my family member
          Biggest slide is closed
          Limited ride on games
          Means one game only one time you can ride and there are only four rides</p>
      </Accordion>
      <Accordion title="Accordion 2">
        {/* Content of Accordion 2 */}
        <p>Very poor Waterpark
         Pools are not cleaned and are slippery
         Slide is broken
         Broken slide hurts my family member
         Biggest slide is closed
         Limited ride on games
         Means one game only one time you can ride and there are only four rides</p>
      </Accordion>
    </div>
  );
};

export default App;

Accordion.js

import React, { useState } from 'react';

const Accordion = ({ title, children }) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleAccordion = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div className="accordion">
      <div className="accordion-header" onClick={toggleAccordion}>
        <div className="accordion-title">{title}</div>
        <div className={`accordion-icon ${isOpen ? 'open' : ''}`}>
          {/* You can use SVG or any other icon */}
          
        </div>
      </div>
      {isOpen && (
        <div className="accordion-content">
          {children}
        </div>
      )}
    </div>
  );
};

export default Accordion;

In the above code example, I have used the accordion component and add accordion in react js.

Check the output of the above code example.

All the best 👍