React MUI Accordion API

MUI is a popular open-source library of React components for building web applications. It provides a set of pre-designed UI components, such as buttons, forms, icons, typography, and more, that can be easily customized and integrated into any React application.

Accordion is a type of UI component that allows users to collapse and expand content sections based on their needs. It is a popular UI pattern that is used in many web applications to provide a more streamlined user experience. MUI Accordion API provides a wide range of options for building such accordion components with ease.

To use the Accordion component, you need to provide it with some content that will be collapsed and expanded as per the user’s interaction. The Accordion component has different types of props that allow you to modify the behavior, look, and feel of the accordion. You can use an expanded prop to determine whether the Accordion is expanded or collapsed. 

Props:

• children – The content of the Accordion component, typically used to render AccordionDetails and AccordionSummary components.
• classes – Override or extend the styles applied to the component using the MUI withStyles higher-order component.
• defaultExpanded – If true, the Accordion will be expanded by default when the page loads.
• disabled – If true, the Accordion will be disabled and cannot be expanded or collapsed.
• disableGutters – If true, the Accordion will not have gutters (padding) on its sides.
• expanded – If true, the Accordion will be expanded and show its content.
• onChange – Callback function that is called when the Accordion changes its state (expanded or collapsed).
• square – If true, the Accordion will be square instead of rounded at the corners.
• sx – Custom styles for the Accordion component using the sx prop from the MUI theme, enabling the use of the MUI theme and custom styles together.
• TransitionComponent – The component used for the transition when the Accordion expands or collapses, typically an MUI Collapse or Grow component.
• TransitionProps –  Additional props to pass to the TransitionComponent, such as timeout or appear.

CSS:

• root – The root element of the Accordion component, used to apply styles to the component as a whole.
• rounded – A Boolean value that determines if the Accordion should have rounded corners or not.
• expanded – A class applied to the Accordion when it is expanded, used to apply styles to the Accordion’s content when it is expanded.
• disabled – A class applied to the Accordion when it is disabled, used to apply styles to the Accordion when it cannot be interacted with.
• gutters – A class applied to the Accordion’s content wrapper, used to apply padding to the Accordion’s content.
• region – A CSS selector for the region of the Accordion, used to apply styles to a specific region of the Accordion, such as the header or content region.

Inheritance: The Accordion component inherits the props of the ‘Paper’ component, which means we can use all ‘Paper’ props in the accordion component. It can be used to target nested components.

Syntax:

Import Accordion API:

import { Accordion } from '@mui/material';

Creating React Project:

Step 1: Create a react app. Use the command below.

npx create-react-app project_name

Step 2: Go to your project directory to perform different operations.

cd project_name

Step 3: Installing MUI modules.

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

Project Structure:

Project Structure

Example 1: Basic MUI Accordion implementation.

Javascript

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";
import { Grid } from "@mui/material";

export default function SimpleAccordion() {
    return (
        <>
            <h1 style={{
                display: "flex",
                justifyContent: "center",
                color: "green"
            }}>
                Geeksforgeeks courses
            </h1>

            <Grid container spacing={2}>
                <Grid item xs={6}>
                    <item>
                        <div>
                            <Accordion>
                                <AccordionSummary
                                    expandIcon={<ExpandMoreIcon />}
                                    aria-controls="panel1a-content"
                                    id="panel1a-header"
                                >
                                    <Typography>What is a DSA course?</Typography>
                                </AccordionSummary>
                                <AccordionDetails>
                                    <Typography>
                                        This DSA course covers all topics.
                                    </Typography>
                                </AccordionDetails>
                            </Accordion>
                            <Accordion>
                                <AccordionSummary
                                    expandIcon={<ExpandMoreIcon />}
                                    aria-controls="panel2a-content"
                                    id="panel2a-header"
                                >
                                    <Typography>Why learn DSA?</Typography>
                                </AccordionSummary>
                                <AccordionDetails>
                                    <Typography>
                                        Learning DSA is important
                                        for software developer.
                                    </Typography>
                                </AccordionDetails>
                            </Accordion>
                            <Accordion>
                                <AccordionSummary
                                    expandIcon={<ExpandMoreIcon />}
                                    aria-controls="panel2a-content"
                                    id="panel2a-header"
                                >
                                    <Typography>
                                        Topics covered in DSA course?
                                    </Typography>
                                </AccordionSummary>
                                <AccordionDetails>
                                    <Typography>
                                        It covers arrays, linked lists, trees.
                                    </Typography>
                                </AccordionDetails>
                            </Accordion>
                        </div>
                    </item>
                </Grid>
                <Grid item xs={6}>
                    <item>
                        <div>
                            <Accordion>
                                <AccordionSummary
                                    expandIcon={<ExpandMoreIcon />}
                                    aria-controls="panel1a-content"
                                    id="panel1a-header"
                                >
                                    <Typography>What is an ML course?</Typography>
                                </AccordionSummary>
                                <AccordionDetails>
                                    <Typography>
                                        An ML course is a computer science
                                        course that teaches students about
                                        Machine Learning.
                                    </Typography>
                                </AccordionDetails>
                            </Accordion>
                            <Accordion>
                                <AccordionSummary
                                    expandIcon={<ExpandMoreIcon />}
                                    aria-controls="panel2a-content"
                                    id="panel2a-header"
                                >
                                    <Typography>What topics are covered?</Typography>
                                </AccordionSummary>
                                <AccordionDetails>
                                    <Typography>
                                        supervised learning, unsupervised
                                        learning, deep learning,
                                        neural networks, decision trees.
                                    </Typography>
                                </AccordionDetails>
                            </Accordion>
                            <Accordion>
                                <AccordionSummary
                                    expandIcon={<ExpandMoreIcon />}
                                    aria-controls="panel2a-content"
                                    id="panel2a-header"
                                >
                                    <Typography>How to prepare ?</Typography>
                                </AccordionSummary>
                                <AccordionDetails>
                                    <Typography>
                                        Start learning programming
                                        languages like Python
                                        or R.
                                    </Typography>
                                </AccordionDetails>
                            </Accordion>
                        </div>
                    </item>
                </Grid>
            </Grid>
        </>
    );
}

Output:

Example 2: MUI Accordion implementation with icons in it.

Javascript

import React from "react";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import DesignServicesIcon from '@mui/icons-material/DesignServices';
import WebIcon from '@mui/icons-material/Web';
import AnalyticsIcon from '@mui/icons-material/Analytics';
import GroupsIcon from '@mui/icons-material/Groups';
import {
    Accordion,
    AccordionDetails,
    AccordionSummary,
    Typography,
} from "@mui/material";

export default function MyAccordion() {
    return (
        <>
            <h1 style={{
                display: "flex",
                justifyContent: "center",
                color: "green"
            }}>
                Geeksforgeeks
            </h1>
            <h1 style={{
                display: "flex",
                justifyContent: "center"
            }}>
                Services
            </h1>

            <Accordion>
                <AccordionSummary
                    expandIcon={<ExpandMoreIcon />}
                    aria-controls="panel1a-content"
                    id="panel1a-header"
                >
                    <DesignServicesIcon />
                    <Typography>Web Design</Typography>
                </AccordionSummary>
                <AccordionDetails>
                    <Typography>
                        Web design is used for creating the
                        visual look and feel of a website.
                    </Typography>
                </AccordionDetails>
            </Accordion>
            <Accordion>
                <AccordionSummary
                    expandIcon={<ExpandMoreIcon />}
                    aria-controls="panel2a-content"
                    id="panel2a-header"
                >
                    <WebIcon />
                    <Typography>Web Development</Typography>
                </AccordionSummary>
                <AccordionDetails>
                    <Typography>
                        Web development involves creating the
                        website and making it functional.
                    </Typography>
                </AccordionDetails>
            </Accordion>
            <Accordion>
                <AccordionSummary
                    expandIcon={<ExpandMoreIcon />}
                    aria-controls="panel3a-content"
                    id="panel3a-header"
                >
                    <AnalyticsIcon />
                    <Typography>SEO</Typography>
                </AccordionSummary>
                <AccordionDetails>
                    <Typography>
                        SEO is used to optimize a website
                        to improve its visibility in
                        search engine pages.
                    </Typography>
                </AccordionDetails>
            </Accordion>
            <Accordion>
                <AccordionSummary
                    expandIcon={<ExpandMoreIcon />}
                    aria-controls="panel3a-content"
                    id="panel3a-header"
                >
                    <GroupsIcon />
                    <Typography>Social Media Marketing</Typography>
                </AccordionSummary>
                <AccordionDetails>
                    <Typography>
                        It involves some social media
                        platforms like Facebook, Twitter
                        & Instagram to market your brand.
                    </Typography>
                </AccordionDetails>
            </Accordion>
        </>
    );
}

Output:

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