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:

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;