Close
Close full mode
logoWebDevAssist

Material-UI Accordion component example

Material-UI Accordion component:

Accordions are used to create an expansion panel. We can put other contents in Accordion and it will expand/collapse on clicking its header.

In this post, we will learn how to use Accordion with examples.

YouTube video:

I have published one video on YouTube, you can watch it here:

Simple Example:

We need to use Accordion, AccordionSummary and AccordionDetails components to show the complete accordion. Below is the complete example:

import {
Accordion,
Box,
AccordionSummary,
AccordionDetails,
Typography,
} from "@material-ui/core";
import { Theme, createStyles, makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
accordion: {
margin: theme.spacing(3),
width: theme.spacing(100),
},
})
);
function App() {
const classes = useStyles();
return (
<Box className={classes.accordion}>
<Accordion>
<AccordionSummary>
<Typography>This is the summary</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Pulvinar
sapien et ligula ullamcorper malesuada proin libero nunc consequat.
Mauris sit amet massa vitae. Varius duis at consectetur lorem donec
massa sapien faucibus. Commodo nulla facilisi nullam vehicula ipsum
a arcu cursus. Libero volutpat sed cras ornare arcu dui vivamus
arcu. Mi eget mauris pharetra et ultrices. Vel risus commodo viverra
maecenas accumsan lacus vel facilisis volutpat. Sodales neque
sodales ut etiam. Phasellus vestibulum lorem sed risus ultricies
tristique. Dui ut ornare lectus sit amet est. Risus sed vulputate
odio ut enim blandit. Vel pretium lectus quam id.
</Typography>
</AccordionDetails>
</Accordion>
</Box>
);
}
export default App;

It will create one simple accordion:

Material-UI Accordion
Material-UI Accordion

Material-UI accordion open
Material-UI accordion open

Adding an icon:

We can add one icon to show in the header. AccordionSummary provides one props called expandIcon, where we can provide one icon. For example:

<AccordionSummary expandIcon={<ExpandMoreOutlined />}>
...
...

Square Accordion:

We can change an Accordion to square by providing square props to it.

<Accordion square>
....
....

Adding Actions:

AccordionActions component is used to add actions to an Accordion. It will add the actions to the bottom of its summary.

<Box className={classes.accordion}>
<Accordion>
<AccordionSummary>
<Typography>Accordion with actions</Typography>
</AccordionSummary>
<AccordionDetails>
<DetailText />
</AccordionDetails>
<AccordionActions>
<Button>OK</Button>
<Button>Cancel</Button>
</AccordionActions>
</Accordion>
</Box>

Handling Accordion using state variables:

We can handle the expand/collapse state of an Accordion by using a state variable. expanded props is used to define the current state and onChange is called if user clicks on it.

function App() {
const [current, setCurrent] = useState(-1);
const classes = useStyles();
const changeState = (panel) => (e, newValue) => {
setCurrent(newValue ? panel : -1);
};
return (
<>
<Box className={classes.accordion}>
<Accordion expanded={current === 0} onChange={changeState(0)}>
<AccordionSummary>
<Typography>Basic Accordion</Typography>
</AccordionSummary>
<AccordionDetails>
<DetailText />
</AccordionDetails>
</Accordion>
</Box>
</>
);
}

Complete example:

import {
Accordion,
Box,
AccordionSummary,
AccordionDetails,
AccordionActions,
Typography,
Button,
} from "@material-ui/core";
import { Theme, createStyles, makeStyles } from "@material-ui/core/styles";
import { ExpandMoreOutlined } from "@material-ui/icons";
import { useState } from "react";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
accordion: {
margin: theme.spacing(3),
width: theme.spacing(100),
},
})
);
const DetailText = () => (
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Pulvinar sapien et
ligula ullamcorper malesuada proin libero nunc consequat. Mauris sit amet
massa vitae. Varius duis at consectetur lorem donec massa sapien faucibus.
Commodo nulla facilisi nullam vehicula ipsum a arcu cursus. Libero volutpat
sed cras ornare arcu dui vivamus arcu. Mi eget mauris pharetra et ultrices.
Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat.
Sodales neque sodales ut etiam. Phasellus vestibulum lorem sed risus
ultricies tristique. Dui ut ornare lectus sit amet est. Risus sed vulputate
odio ut enim blandit. Vel pretium lectus quam id.
</Typography>
);
function App() {
const [current, setCurrent] = useState(-1);
const classes = useStyles();
const changeState = (panel) => (e, newValue) => {
setCurrent(newValue ? panel : -1);
};
return (
<>
<Box className={classes.accordion}>
<Accordion expanded={current === 0} onChange={changeState(0)}>
<AccordionSummary>
<Typography>Basic Accordion</Typography>
</AccordionSummary>
<AccordionDetails>
<DetailText />
</AccordionDetails>
</Accordion>
</Box>
<Box className={classes.accordion}>
<Accordion>
<AccordionSummary expandIcon={<ExpandMoreOutlined />}>
<Typography>Accordion with expandIcon</Typography>
</AccordionSummary>
<AccordionDetails>
<DetailText />
</AccordionDetails>
</Accordion>
</Box>
<Box className={classes.accordion}>
<Accordion square>
<AccordionSummary>
<Typography>Square Accordion</Typography>
</AccordionSummary>
<AccordionDetails>
<DetailText />
</AccordionDetails>
</Accordion>
</Box>
<Box className={classes.accordion}>
<Accordion>
<AccordionSummary>
<Typography>Accordion with actions</Typography>
</AccordionSummary>
<AccordionDetails>
<DetailText />
</AccordionDetails>
<AccordionActions>
<Button>OK</Button>
<Button>Cancel</Button>
</AccordionActions>
</Accordion>
</Box>
</>
);
}
export default App;

Subscribe to our Newsletter

Previous
How to create Cards in Material-UI react
Next
How to create Badges in Material-UI React