Accordion

The Accordion component lets users show and hide sections of related content on a page.

<Accordion>
  <AccordionSummary helperText="Helper Text" expandIcon={<ArrowDown />} aria-controls="panel1d-content" id="panel1d-header">
    <Typography variant="h4" component="h4">Accordion #1</Typography>
  </AccordionSummary>
  <AccordionDetails>
    <Typography>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
      malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor
      sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
      sit amet blandit leo lobortis eget.
    </Typography>
  </AccordionDetails>
</Accordion>
<Accordion>
  <AccordionSummary helperText="Helper Text" expandIcon={<ArrowDown />} aria-controls="panel1d-content" id="panel1d-header">
    <Typography variant="h4" component="h4">Accordion #2</Typography>
  </AccordionSummary>
  <AccordionDetails>
    <Typography>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
      malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor
      sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
      sit amet blandit leo lobortis eget.
    </Typography>
  </AccordionDetails>
</Accordion>

Props

Prop	Type	Description
action	ReactNode	The content of the component.
children	ReactNode	The content of the component.
classes	object	Override or extend the styles applied to the component.
defaultExpanded	boolean	If true, expands the accordion by default.
disabled	boolean	If true, the component is disabled.
disableGutters	boolean	If true, it removes the margin between two expanded accordion items and the increase of height.
expanded	boolean	If true, expands the accordion, otherwise collapse it. Setting this prop enables control over the accordion.

The ref is forwarded to the root element.

Examples

Accordion with Switches

<Accordion disableGutters elevation={0}>
  <AccordionSummary helperText="Helper Text" expandIcon={<ArrowDown />} aria-controls="panel1d-content" id="panel1d-header">
    <Typography variant="h4" component="h4">
      <Switch />Switch #1
    </Typography>
  </AccordionSummary>
  <AccordionDetails>
    <div style={{ paddingLeft: 32 }}>
      <MenuItem value="Ten">
        <Checkbox checked={true} />
        <ListItemText primary="Ten" />
      </MenuItem>
      <MenuItem value="Twenty">
        <Checkbox checked={true} />
        <ListItemText primary="Twenty" />
      </MenuItem>
      <MenuItem value="Thirty">
        <Checkbox checked={false} />
        <ListItemText primary="Thirty" />
      </MenuItem>
      <MenuItem value="Forty">
        <Checkbox checked={true} />
        <ListItemText primary="Forty" />
      </MenuItem>
    </div>
  </AccordionDetails>
</Accordion>
<Accordion disableGutters elevation={0}>
  <AccordionSummary helperText="Helper Text" expandIcon={<ArrowDown />} aria-controls="panel1d-content" id="panel1d-header">
    <Typography variant="h4" component="h4">
      <Switch />Switch #1
    </Typography>
  </AccordionSummary>
  <AccordionDetails>
    <div style={{ paddingLeft: 32 }}>
      <FormControl component="fieldset">
        <FormControlLabel
          value="disabled1"
          control={<Radio />}
          label="Selected disabled option"
        />
        <FormControlLabel
          value="disabled2"
          control={<Radio />}
          label="Unselected disabled option"
        />
      </FormControl>
    </div>
  </AccordionDetails>
</Accordion>

Accordion with CheckBox

<Accordion disableGutters elevation={0}>
  <AccordionSummary helperText="Helper Text" expandIcon={<ArrowDown />} aria-controls="panel1d-content" id="panel1d-header">
    <Typography variant="h4" component="h4">
      <Checkbox />CheckBox #1
    </Typography>
  </AccordionSummary>
  <AccordionDetails>
    <div style={{ paddingLeft: 32 }}>
      <MenuItem value="Ten">
        <Checkbox checked={true} />
        <ListItemText primary="Ten" />
      </MenuItem>
      <MenuItem value="Twenty">
        <Checkbox checked={true} />
        <ListItemText primary="Twenty" />
      </MenuItem>
      <MenuItem value="Thirty">
        <Checkbox checked={false} />
        <ListItemText primary="Thirty" />
      </MenuItem>
      <MenuItem value="Forty">
        <Checkbox checked={true} />
        <ListItemText primary="Forty" />
      </MenuItem>
    </div>
  </AccordionDetails>
</Accordion>

<Accordion disableGutters elevation={0}>
  <AccordionSummary helperText="Helper Text" expandIcon={<ArrowDown />} aria-controls="panel1d-content" id="panel1d-header">
    <Typography variant="h4" component="h4">
      <Checkbox />CheckBox #2
    </Typography>
  </AccordionSummary>
  <AccordionDetails>
    <div style={{ paddingLeft: 32 }}>
      <FormControl component="fieldset">
        <FormControlLabel value="disabled1" control={<Radio />} label="Selected disabled option" />
        <FormControlLabel value="disabled2" control={<Radio />} label="Unselected disabled option" />
      </FormControl>
    </div>
  </AccordionDetails>
</Accordion>

Accordion with Options

() => {
  const options = [
    { id: '608114', name: 'Appreciate' },
    { id: '44689', name: 'Congratulations' },
    { id: '3748', name: 'Customer Service' },
    { id: '889165', name: 'Great Work' },
    { id: '658239', name: 'Happy Birthday' },
    { id: '579120', name: 'Innovation' },
    { id: '4292', name: 'Thank you' },
  ];

  const [selections, onSelectionChange] = React.useState({});

  const isSelected = (option) => selections[option.name];

  const onChange = ({ target: { checked, name } }) => {
    onSelectionChange((prev) => ({
      ...prev,
      [name]: checked,
    }));
  };

  const selectAll = () => {
    const newSelections = {};
    options.forEach((option) => {
      newSelections[option.name] = true;
    });
    onSelectionChange(newSelections);
  };

  const selectNone = () => {
    onSelectionChange({});
  };

  const count = options.filter((option) => isSelected(option)).length;
  const total = options.length;

  return (
    <Accordion>
      <AccordionSummary helperText={`${count} of ${total} selected`}>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <Typography variant="h4">Accordion with options inside</Typography>
          <Typography variant="body2">
            Uses the OptionsList component as the content
          </Typography>
        </div>
      </AccordionSummary>
      <AccordionDetails>
        <OptionsList
          options={options}
          isSelected={isSelected}
          onSelectAll={selectAll}
          onSelectNone={selectNone}
          onChange={onChange}
        />
      </AccordionDetails>
    </Accordion>
  );
};