How to use Material UI's accordion component

Key takeaways:
Material UI is an open-source React library providing pre-designed, user-friendly components based on Google's Material Design.
The Accordion component simplifies content organization by displaying expandable sections with summaries and collapsible details.
Uncontrolled Accordion manages its open/closed state internally without external control.
Controlled Accordion uses React state to manage its expanded state which offer more control over which panel is open.

Material UI is a React open-source library that focuses on providing pre-designed components and styles for creating modern, user-friendly, and visually appealing web applications. It follows the guidelines provided by Google's Material Design, resulting in intuitive and well-designed components.

In this Answer, we will look into what Material UI's Accordion component is, and how we can integrate it into our React application.

Note: Please make sure to install Material UI version 5 in your systems as we will be using it in the Answer.

The `Accordion` component

When we create a complex web application with a lot of content, a major task is to organize it in a manageable and visually appealing way. The Accordion component plays a major role in this aspect as it simplifies content organization and enhances user experience.

The primary feature of the Accordion component is to display a list of items where each list has a summary and a collapsible content section. Below, we can see an example of a simple Accordion component.

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';

export default function SimpleAccordion() {
  return (
    <div>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon/>}
        >
          <Typography variant='h4'>Item 1</Typography>
        </AccordionSummary>
        <AccordionDetails>
        <Typography variant='h5'>
            This section contains the collapsible content of item 1
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
        >
          <Typography variant='h4'>Item 2</Typography>
        </AccordionSummary>
        <AccordionDetails>
        <Typography variant='h5'>
            This section contains the collapsible content of item 2
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion >
        <AccordionSummary
          expandIcon={<ExpandMoreIcon/>}
        >
          <Typography variant='h4' >Item 3</Typography>
        </AccordionSummary>
        <AccordionDetails>
        <Typography variant='h5'>
            This section contains the collapsible content of item 3
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
        >
          <Typography variant='h4'>Item 4</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography variant='h5'>
            This section contains the collapsible content of item 4
          </Typography>
        </AccordionDetails>
      </Accordion>

    </div>
  );
}

Basic Accordion component

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';

export default function SimpleAccordion() {
  return (
    <div>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon/>}
        >
          <Typography variant='h4'>Item 1</Typography>
        </AccordionSummary>
        <AccordionDetails>
        <Typography variant='h5'>
            This section contains the collapsible content of item 1
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
        >
          <Typography variant='h4'>Item 2</Typography>
        </AccordionSummary>
        <AccordionDetails>
        <Typography variant='h5'>
            This section contains the collapsible content of item 2
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion >
        <AccordionSummary
          expandIcon={<ExpandMoreIcon/>}
        >
          <Typography variant='h4' >Item 3</Typography>
        </AccordionSummary>
        <AccordionDetails>
        <Typography variant='h5'>
            This section contains the collapsible content of item 3
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
        >
          <Typography variant='h4'>Item 4</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography variant='h5'>
            This section contains the collapsible content of item 4
          </Typography>
        </AccordionDetails>
      </Accordion>

    </div>
  );
}

Code to create a simple Accordion component

Code explanation

Line 2: We import the Accordion component from @mui/material/Accordion. This is the main component that wraps the AccordianSummaryThe content that is displayed when the component is collapsed. and AccordianDetailsThe component that displays content once we click on the accordion component. component.
Line 3: We import the AccordionSummary component that displays the summary content.
Line 4: We import the AccordionDetails component that displays the detailed content of the Accordian component when the Accordion component is expanded.

Note: The above code shows the uncontrolled accordion as it is managed by its own local state.

Controlled `Accordion`

The Accordion component is controlled when it is managed using the props passed by the parent component. The example code is shown below:

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';

export default function ControlledAccordion() {
  const [expanded, setExpanded] = React.useState(false);
  const handleChange = (acc) => (event, isExpanded) => {
    setExpanded(isExpanded ? acc : false);
  };

  return (
    <div>
      <Accordion expanded={expanded === 'acc1'} onChange={handleChange('acc1')}>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon/>}
        >
          <Typography variant='h4'>Item 1</Typography>
        </AccordionSummary>
        <AccordionDetails>
        <Typography variant='h5'>
            This section contains the collapsible content of item 1
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion expanded={expanded === 'acc2'} onChange={handleChange('acc2')}>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
        >
          <Typography variant='h4'>Item 2</Typography>
        </AccordionSummary>
        <AccordionDetails>
        <Typography variant='h5'>
            This section contains the collapsible content of item 2
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion expanded={expanded === 'acc3'} onChange={handleChange('acc3')}>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon/>}
        >
          <Typography variant='h4' >Item 3</Typography>
        </AccordionSummary>
        <AccordionDetails>
        <Typography variant='h5'>
            This section contains the collapsible content of item 3
          </Typography>
        </AccordionDetails>
      </Accordion>
     
    </div>
  );
}

Code to create a controlled Accordion component

Code explanation

Line 9: We create a state variable expanded that keeps track of whether an accordion is expanded or not.
Line 10–12: We create a function that takes acc (in our case a string) and the isExpanded parameter to set the state of the expanded variable using the condition isExpanded ? acc : false.
Line 16: We pass in the expanded attribute that checks if the expanded state variable equals acc1. If it's true, then the accordion expands. The onChange attribute calls the handleChange function and pass in acc1 as a string.
Lines 28 and 40: Similarly, for the second and third accordions, we pass in the expanded attribute that checks if the expanded state variable equals acc2 and acc3 respectively. If it is true, then the accordion expands.

Color customization

We can change the color of an accordion by using sx (styling attribute) and setting the bgcolor (background color) to a specific color. Let's see an example of adding color to the accordion:

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';

export default function SimpleAccordion() {
  return (
    <div>
      <Accordion sx={{bgcolor:"blueviolet"}}>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon sx = {{color:'white'}}/>}
        >
          <Typography variant='h4' color={'white'}>Item 1</Typography>
        </AccordionSummary>
        <AccordionDetails>
        <Typography variant='h5' color={'white'}>
            This section contains the collapsible content of item 1
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
        >
          <Typography variant='h4'>Item 2</Typography>
        </AccordionSummary>
        <AccordionDetails>
        <Typography variant='h5'>
            This section contains the collapsible content of item 2
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion sx={{bgcolor:"blueviolet"}}>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon sx = {{color:'white'}}/>}
        >
          <Typography variant='h4' color={'white'}>Item 3</Typography>
        </AccordionSummary>
        <AccordionDetails>
        <Typography variant='h5' color={'white'}>
            This section contains the collapsible content of item 3
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
        >
          <Typography variant='h4'>Item 4</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography variant='h5'>
            This section contains the collapsible content of item 4
          </Typography>
        </AccordionDetails>
      </Accordion>

    </div>
  );
}

Code to add colors to the accordion component

Code explanation

Lines 11 and 35: We use the sx attribute in the Accordian component and set the background color to blueviolet.

Explore the following projects for hands-on practice in creating real-world applications with React. You can enhance these projects by incorporating Material-UI for a polished and visually appealing design.

Conclusion

Material UI's Accordian component is valuable to improve a web page's content presentation and user experience. Using it, developers can manage how their applications show complex information on the screen.

Frequently asked questions

Haven’t found what you were looking for? Contact Us

How do I import Accordion in Material UI?

import { Accordion, AccordionSummary, AccordionDetails } from '@mui/material';

How can we keep accordion open by default in Material UI?

Use the defaultExpanded prop on the Accordion component to make it open by default.

How can I make sure only one Accordion panel is expanded at a time in Material UI?

To ensure only one Accordion panel is expanded at a time in Material UI, manage the expanded prop with React state. Update the state to control which panel is expanded, and close others by setting their expanded prop to false.

How do I disable the Accordion?

We can disable the Accordion using the disabled prop on Accordion or AccordionSummary, preventing users from interacting with it.

Free Resources

Learn in-demand tech skills in half the time

PRODUCTS

Mock Interview

New

Courses

Skill Paths

Projects

Assessments

How to use Material UI's accordion component

The `Accordion` component

`Accordion` types

Uncontrolled `Accordion`

Code explanation

Controlled `Accordion`

Code explanation

Color customization

Code explanation

Conclusion

Frequently asked questions

How do I import Accordion in Material UI?

How can we keep accordion open by default in Material UI?

How can I make sure only one Accordion panel is expanded at a time in Material UI?

How do I disable the Accordion?

How to use Material UI's accordion component

The Accordion component

Accordion types

Uncontrolled Accordion

Code explanation

Controlled Accordion

Code explanation

Color customization

Code explanation

Conclusion

Frequently asked questions

How do I import Accordion in Material UI?

How can we keep accordion open by default in Material UI?

How can I make sure only one Accordion panel is expanded at a time in Material UI?

How do I disable the Accordion?

The `Accordion` component

`Accordion` types

Uncontrolled `Accordion`

Controlled `Accordion`