How to create Accordion in ReactJS ?

Last Updated : 22 Mar, 2024

Accordions contain creation flows and allow lightweight editing of an element. Material UI for React has this component available for us, and it is very easy to integrate. We can create it in React using the following approach.

Approach to create Accordion in React JS

To create accordion in react we will

use the MUI Accordion component.
use the expand icons, AccordionSummary and AccrodionDetail component from MUI along with related content for a complete working accordion.
Style the accrodion using CSS and inline styling.

Steps to Create the React Application And Installing Module

Step 1: Initialize and setup the react app using the CRA command.

Step 2: After creating the ReactJS application, Install the material-ui modules using the following command.

npm i @material-ui/core
npm i @material-ui/icons

The updated dependencies in package.json file will look like:

"dependencies": {
    "@material-ui/core": "^4.12.4",
    "@material-ui/icons": "^4.11.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example: This example demonstrate how to create accordion in react with the help of MUI accordion compoenet. Now write down the following code in the App.js file.

Javascript

// Filename - App.js

import React from "react";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import Accordion from "@material-ui/core/Accordion";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import Typography from "@material-ui/core/Typography";
import AccordionSummary from "@material-ui/core/AccordionSummary";

export default function App() {
    return (
        <div style={{}}>
            <h4>How to create Accordion in ReactJS?</h4>
            <Accordion style={{ width: 400 }}>
                <AccordionSummary
                    expandIcon={<ExpandMoreIcon />}
                    aria-controls="panel1a-content">
                    <Typography
                        style={{
                            fontWeight: 10,
                        }}>
                        Accordion Demo
                    </Typography>
                </AccordionSummary>
                <AccordionDetails>
                    <Typography>
                        Greetings of the day :)
                    </Typography>
                </AccordionDetails>
            </Accordion>
        </div>
    );
}