Post
Ask Question

How to create Accordion in React Application

Introduction

In this article, we will learn how to create Accordion in React Application using Material UI.

Prerequisites of React

  • Familiarity with HTML and JavaScript.
  • node.js installed
  • Basic knowledge of React JS
  • Visual Studio Code

Create React Project

To create a React app, use the following command in the terminal.

npx create-react-app matui

Open the newly created project in Visual Studio Code, and install Material-UI; run the following command in your React project's root directory.

npm install @material-ui/core

Now right-click on the src folder and create a new component named 'Accordindemo.js'. We will create a simple accordion using material UI. Import the following component from Material UI in the Accordindemo.js file.

import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

Now, add the following code in the Accordindemo.js file.

import React from 'react'
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
function Accordindemo() {
  return (
    <div>
    <Accordion>
      <AccordionSummary
        expandIcon={<ExpandMoreIcon />}
        aria-controls="panel1a-content"
        id="panel1a-header"
      >
        <Typography>Accordion 1</Typography>
      </AccordionSummary>
      <AccordionDetails>
        <Typography>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
          malesuada lacus ex, sit amet blandit leo lobortis eget.
        </Typography>
      </AccordionDetails>
    </Accordion>
    <Accordion>
      <AccordionSummary
        expandIcon={<ExpandMoreIcon />}
        aria-controls="panel2a-content"
        id="panel2a-header"
      >
        <Typography>Accordion 2</Typography>
      </AccordionSummary>
      <AccordionDetails>
        <Typography>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
          malesuada lacus ex, sit amet blandit leo lobortis eget.
        </Typography>
      </AccordionDetails>
    </Accordion>
    <Accordion>
      <AccordionSummary
        expandIcon={<ExpandMoreIcon />}
        aria-controls="panel3a-content"
        id="panel3a-header"
      >
        <Typography>Disabled Accordion</Typography>
      </AccordionSummary>
    </Accordion>
  </div>
  )
}

export default Accordindemo

Now, import the Togledemo component in the src/App.js file.

import './App.css';
import Accordindemo from './Accordindemo'
function App() {
  return (
    <div className="App">
      <Accordindemo/>
    </div>
  );
}

export default App;

Run the project using the 'npm start' command and check the result.

Result

Summary

This article provides a step-by-step guide on creating accordion in React applications using the Material UI library.


Similar Articles