React MUI Accordion Surface

React MUI is a UI library that provides fully loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.

In this article, we’ll be discussing React MUI Accordion Surface. The accordion component is a lightweight container that shows and hides sections of related content on a page.

MUI Accordion Surface Variants: The card surface has a default version. Another variant is given below.

• Basic accordion: It is the default accordion in react mui. 
• Controlled accordion: It extends the default behavior to create an accordion with the component.
• Customization: The accordion surface can also be customized.
• Performance: To optimize the usage of multiple accordions, make sure to change the default behavior by enabling the unmountOnExit in the TransitionProps prop.
• Accessibility: Use id and aria-controls on the AccordionSummary to have optimal accessibility.

Syntax:

<Accordion>
    ...
</Accordion>

Creating a React Application Project:

Step 1: To create a react app, install react modules through the npm command.

npm create-react-app project name

Step 2: After creating your react project, move into the folder to perform different operations.

cd project name

Step 3: After creating the ReactJS application, Install the required module using the following command:

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

Project Structure:

Step to Run Application:

npm start

Example 1: Below example demonstrates the React MUI basic accordion surface component.

Javascript

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 ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';

function App() {
    return (
        <div>
            <div style={{ textAlign: "center",
                          color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>React MUI Card Surface</h2>
            </div>
            <center>
                <div style={{ width: 500 }}>
                    <Accordion style={{ backgroundColor: '#8AFF89' }}>
                        <AccordionSummary
                            expandIcon={<ArrowDropDownIcon />}>
                            <Typography>Courses</Typography>
                        </AccordionSummary>
                        <AccordionDetails>
                            <Typography>
                                <li>C++</li>
                                <li>Java</li>
                                <li>Python</li>
                            </Typography>
                        </AccordionDetails>
                    </Accordion>
                    <Accordion style={{ backgroundColor: '#8AFF89' }}>
                        <AccordionSummary
                            expandIcon={<ArrowDropDownIcon />}>
                            <Typography>Tutorials</Typography>
                        </AccordionSummary>
                        <AccordionDetails>
                            <Typography>
                                <li>DSA</li>
                                <li>Algorithms</li>
                                <li>Web Development</li>
                            </Typography>
                        </AccordionDetails>
                    </Accordion>
                    <Accordion style={{ backgroundColor: '#8AFF89' }}>
                        <AccordionSummary
                            expandIcon={<ArrowDropDownIcon />}>
                            <Typography>Practice</Typography>
                        </AccordionSummary>
                        <AccordionDetails>
                            <Typography>
                                <li>Problem of the Day</li>
                                <li>All DSA Problems</li>
                            </Typography>
                        </AccordionDetails>
                    </Accordion>
                </div>
            </center>
        </div>
    );
}

export default App;

Output:

Example 2: Below example demonstrates the React MUI-controlled accordion surface component.

Javascript

import React, { useState } 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 ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";

function App() {
    const [open, setOpen] = useState(false);

    const accChange = (card) => (e, isOpen) => {
        setOpen(isOpen ? card : false);
    };

    return (
        <div>
            <div style={{ textAlign: "center",
                          color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>React MUI Card Surface</h2>
            </div>
            <div style={{ width: 500, marginLeft: 100 }}>
                <Accordion
                    expanded={open === "accordionFirst"}
                    onChange={accChange("accordionFirst")}
                >
                    <AccordionSummary expandIcon={<ArrowDropDownIcon />}>
                        <Typography sx={{ width: "50%" }}>
                            Courses
                        </Typography>
                        <Typography>
                             Premium Programming courses..
                        </Typography>
                    </AccordionSummary>
                    <AccordionDetails>
                        <Typography>
                            Buy courses to advance your skills in coding.
                        </Typography>
                    </AccordionDetails>
                </Accordion>
                <Accordion
                    expanded={open === "accordionSecond"}
                    onChange={accChange("accordionSecond")}
                >
                    <AccordionSummary expandIcon={<ArrowDropDownIcon />}>
                        <Typography sx={{ width: "50%" }}>
                            Tutorials
                         </Typography>
                        <Typography>
                            Millions of articles on platform.
                         </Typography>
                    </AccordionSummary>
                    <AccordionDetails>
                        <Typography>
                            Find millions of technical articles
                            related to coding,
                            programming, etc.
                        </Typography>
                    </AccordionDetails>
                </Accordion>
            </div>
        </div>
    );
}

export default App;

Output:

Reference: https://mui.com/material-ui/react-accordion/