React Material UI 5 Animated Accordion Example Tutorial

In this step-by-step guide, you will discover how to build an animated accordion in React JS using React Material UI accordion component.

We will create a separate functional component to create the React accordion component. Material UI offers tons of handy UI components, and we will work on the accordion component in our app.

To teach you how to implement Material UI accordion in React, we will need various Material UI components: Accordion, AccordionSummary, AccordionDetails, Typography, and ExpandMoreIcon modules.

Material UI is a super-awesome, open-source React component library that implements Google’s Material Design.

It contains an extensive array of ready-made UI components that are ready to use in production.

Material UI is stunningly designed and possesses plenty of facile features that help in customizing options that are ready to use and implement your own custom design system on top of our components.

How to Create Animated Accordion in React using Material UI

  • Step 1: Download React App
  • Step 2: Install Material UI Library
  • Step 3: Build Component File
  • Step 4: Build Animated Accordion Component
  • Step 5: Update App.js File
  • Step 6: Run Development Server

Download React App

If you haven’t created a React app, invoke the following command and install a brand new React app.

npx create-react-app react_demo --template typescript

Get inside the project’s root:

cd react_demo

Install Material UI Library

To install the Material UI package and its dependencies execute the suggested command below using npm:

npm install @mui/material @emotion/react @emotion/styled

Roboto font doesn’t come by default with Material UI, make sure to run the given command using npm.

npm install @fontsource/roboto

Next you have to head over to src/App.css file, in this file make sure to add both the given entry points.

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");
@import "@fontsource/roboto/300.css";
@import "@fontsource/roboto/400.css";
@import "@fontsource/roboto/500.css";
@import "@fontsource/roboto/700.css";

Build Component File

To form the function component in React we need to first make the features/AnimatedAccordion.js file, and then add the following code within the file.

import React from 'react'

function AnimatedAccordion() {
  return (
    <div></div>
  )
}

export default AnimatedAccordion

Build Animated Accordion Component

In this step, we need to insert the following code inside the features/AnimatedAccordion.js file.

import * as 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 AnimatedAccordion() {
  return (
    <div>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          <Typography>Accordion One</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 Two</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 disabled>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel3a-content"
          id="panel3a-header"
        >
          <Typography>Disabled Accordion</Typography>
        </AccordionSummary>
      </Accordion>
    </div>
  );
}

export default AnimatedAccordion;

Update App.js File

All alone component won’t bee seen on the browser, hence register the accordion component within the src/App.js global component file.

import React from "react";
import "./App.css";
import AnimatedAccordion from "./features/AnimatedAccordion";

function App() {
  return (
    <div>
      <h2>React Animated Accordion Component Example</h2>
      <AnimatedAccordion />
    </div>
  );
}

export default App;

Run Development Server

To test the app, start the React application using the following command:

npm start

For local development, open the app with the following URL.

http://localhost:3000

React Material UI Animated Accordion Example Tutorial

Conclusion

In this guide, we have comprehended how to create an animated accordion component in React JS using Material UI in the function component.

In this dynamic React Accordion example, we created multiple accordions. We showed you how to keep a single accordion open by default and close another accordion when a single accordion is open.

On top of that, we also learned how to set up Material UI in a basic React application from scratch.

We left no stone unturned; I hope this guide will help in your endeavours.