Drawer Content Here
- Sign Out
Simple Accordion

Use `Accordion`, `AccordionSummary` and `AccordionDetails` components to make a simple accordion.

Accordion 1

Wafer sesame snaps chocolate bar candy canes halvah. Cupcake sesame snaps sweet tart dessert biscuit. Topping soufflé tart sweet croissant.

Accordion 2

Sugar plum sesame snaps caramels. Cake pie tart fruitcake sesame snaps donut cupcake macaroon. Gingerbread pudding cheesecake pie ice cream.

Accordion 3

Gingerbread lemon drops bear claw gummi bears bonbon wafer jujubes tiramisu. Jelly pie cake. Sweet roll dessert sweet pastry powder.

    // ** MUI Imports
    import Accordion from '@mui/material/Accordion'
    import Typography from '@mui/material/Typography'
    import AccordionSummary from '@mui/material/AccordionSummary'
    import AccordionDetails from '@mui/material/AccordionDetails'

    // ** Icon Imports
    import Icon from 'src/@core/components/icon'

    const AccordionSimple = () => {
      return (
        <div>
          <Accordion>
            <AccordionSummary
              id='panel-header-1'
              aria-controls='panel-content-1'
              expandIcon={<Icon fontSize='1.25rem' icon='tabler:chevron-down' />}
            >
              <Typography>Accordion 1</Typography>
            </AccordionSummary>
            <AccordionDetails>
              <Typography sx={{ color: 'text.secondary' }}>
                Wafer sesame snaps chocolate bar candy canes halvah. Cupcake sesame snaps sweet tart dessert biscuit.
                Topping soufflé tart sweet croissant.
              </Typography>
            </AccordionDetails>
          </Accordion>

          <Accordion>
            <AccordionSummary
              id='panel-header-2'
              aria-controls='panel-content-2'
              expandIcon={<Icon fontSize='1.25rem' icon='tabler:chevron-down' />}
            >
              <Typography>Accordion 2</Typography>
            </AccordionSummary>
            <AccordionDetails>
              <Typography sx={{ color: 'text.secondary' }}>
                Sugar plum sesame snaps caramels. Cake pie tart fruitcake sesame snaps donut cupcake macaroon. Gingerbread
                pudding cheesecake pie ice cream.
              </Typography>
            </AccordionDetails>
          </Accordion>

          <Accordion>
            <AccordionSummary
              id='panel-header-3'
              aria-controls='panel-content-3'
              expandIcon={<Icon fontSize='1.25rem' icon='tabler:chevron-down' />}
            >
              <Typography>Accordion 3</Typography>
            </AccordionSummary>
            <AccordionDetails>
              <Typography sx={{ color: 'text.secondary' }}>
                Gingerbread lemon drops bear claw gummi bears bonbon wafer jujubes tiramisu. Jelly pie cake. Sweet roll
                dessert sweet pastry powder.
              </Typography>
            </AccordionDetails>
          </Accordion>
        </div>
      )
    }

    export default AccordionSimple

Controlled Accordion

Manage `expanded` prop with the help of a state.

Accordion 1

Wafer sesame snaps chocolate bar candy canes halvah. Cupcake sesame snaps sweet tart dessert biscuit. Topping soufflé tart sweet croissant.

Accordion 2

Sugar plum sesame snaps caramels. Cake pie tart fruitcake sesame snaps donut cupcake macaroon. Gingerbread pudding cheesecake pie ice cream.

Accordion 3

Gingerbread lemon drops bear claw gummi bears bonbon wafer jujubes tiramisu. Jelly pie cake. Sweet roll dessert sweet pastry powder.

    // ** React Imports
    import { useState } from 'react'

    // ** MUI Imports
    import Accordion from '@mui/material/Accordion'
    import Typography from '@mui/material/Typography'
    import AccordionSummary from '@mui/material/AccordionSummary'
    import AccordionDetails from '@mui/material/AccordionDetails'

    // ** Icon Imports
    import Icon from 'src/@core/components/icon'

    const AccordionControlled = () => {
      // ** State
      const [expanded, setExpanded] = useState(false)

      const handleChange = panel => (event, isExpanded) => {
        setExpanded(isExpanded ? panel : false)
      }

      return (
        <div>
          <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
            <AccordionSummary
              id='controlled-panel-header-1'
              aria-controls='controlled-panel-content-1'
              expandIcon={<Icon fontSize='1.25rem' icon='tabler:chevron-down' />}
            >
              <Typography>Accordion 1</Typography>
            </AccordionSummary>
            <AccordionDetails>
              <Typography sx={{ color: 'text.secondary' }}>
                Wafer sesame snaps chocolate bar candy canes halvah. Cupcake sesame snaps sweet tart dessert biscuit.
                Topping soufflé tart sweet croissant.
              </Typography>
            </AccordionDetails>
          </Accordion>

          <Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
            <AccordionSummary
              id='controlled-panel-header-2'
              aria-controls='controlled-panel-content-2'
              expandIcon={<Icon fontSize='1.25rem' icon='tabler:chevron-down' />}
            >
              <Typography>Accordion 2</Typography>
            </AccordionSummary>
            <AccordionDetails>
              <Typography sx={{ color: 'text.secondary' }}>
                Sugar plum sesame snaps caramels. Cake pie tart fruitcake sesame snaps donut cupcake macaroon. Gingerbread
                pudding cheesecake pie ice cream.
              </Typography>
            </AccordionDetails>
          </Accordion>

          <Accordion expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>
            <AccordionSummary
              id='controlled-panel-header-3'
              aria-controls='controlled-panel-content-3'
              expandIcon={<Icon fontSize='1.25rem' icon='tabler:chevron-down' />}
            >
              <Typography>Accordion 3</Typography>
            </AccordionSummary>
            <AccordionDetails>
              <Typography sx={{ color: 'text.secondary' }}>
                Gingerbread lemon drops bear claw gummi bears bonbon wafer jujubes tiramisu. Jelly pie cake. Sweet roll
                dessert sweet pastry powder.
              </Typography>
            </AccordionDetails>
          </Accordion>
        </div>
      )
    }

    export default AccordionControlled

Customized Accordion

Use `styled` hook to customize the component the way you want it.

Accordion 1

Wafer sesame snaps chocolate bar candy canes halvah. Cupcake sesame snaps sweet tart dessert biscuit. Topping soufflé tart sweet croissant.

Accordion 2

Sugar plum sesame snaps caramels. Cake pie tart fruitcake sesame snaps donut cupcake macaroon. Gingerbread pudding cheesecake pie ice cream.

Accordion 3

Gingerbread lemon drops bear claw gummi bears bonbon wafer jujubes tiramisu. Jelly pie cake. Sweet roll dessert sweet pastry powder.

    // ** React Imports
    import { useState } from 'react'

    // ** MUI Imports
    import { styled } from '@mui/material/styles'
    import Typography from '@mui/material/Typography'
    import MuiAccordion from '@mui/material/Accordion'
    import MuiAccordionSummary from '@mui/material/AccordionSummary'
    import MuiAccordionDetails from '@mui/material/AccordionDetails'

    // ** Icon Imports
    import Icon from 'src/@core/components/icon'

    // Styled component for Accordion component
    const Accordion = styled(MuiAccordion)(({ theme }) => ({
      margin: 0,
      borderRadius: 0,
      boxShadow: 'none !important',
      border:
        theme.palette.mode === 'light' ? 1px solid {theme.palette.grey[300]} : 1px solid {theme.palette.divider},
      '&:not(:last-of-type), &:last-child .MuiAccordionSummary-root:not(.Mui-expanded)': {
        borderBottom: 0
      },
      '&:before': {
        display: 'none'
      },
      '&.Mui-expanded': {
        margin: 'auto'
      },
      '&:first-of-type': {
        '& .MuiButtonBase-root': {
          borderTopLeftRadius: theme.shape.borderRadius,
          borderTopRightRadius: theme.shape.borderRadius
        }
      },
      '&:last-of-type': {
        '& .MuiAccordionSummary-root:not(.Mui-expanded)': {
          borderBottomLeftRadius: theme.shape.borderRadius,
          borderBottomRightRadius: theme.shape.borderRadius
        }
      }
    }))

    // Styled component for AccordionSummary component
    const AccordionSummary = styled(MuiAccordionSummary)(({ theme }) => ({
      marginBottom: -1,
      padding: theme.spacing(0, 4),
      minHeight: theme.spacing(12),
      transition: 'min-height 0.15s ease-in-out',
      backgroundColor: theme.palette.action[theme.palette.mode === 'light' ? 'hover' : 'selected'],
      borderBottom:
        theme.palette.mode === 'light' ? 1px solid {theme.palette.grey[300]} : 1px solid {theme.palette.divider},
      '&.Mui-expanded': {
        minHeight: theme.spacing(12)
      },
      '& .MuiAccordionSummary-content': {
        alignItems: 'center',
        '&.Mui-expanded': {
          margin: '13px 0'
        }
      },
      '& .MuiTypography-root': {
        fontWeight: 400
      },
      '& .MuiAccordionSummary-expandIconWrapper': {
        color: theme.palette.text.secondary
      }
    }))

    // Styled component for AccordionDetails component
    const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
      padding: {theme.spacing(4)} !important
    }))

    const AccordionCustomized = () => {
      // ** State
      const [expanded, setExpanded] = useState('panel1')

      const handleChange = panel => (event, isExpanded) => {
        setExpanded(isExpanded ? panel : false)
      }
      const expandIcon = value => <Icon icon={expanded === value ? 'tabler:minus' : 'tabler:plus'} />

      return (
        <div>
          <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
            <AccordionSummary
              id='customized-panel-header-1'
              expandIcon={expandIcon('panel1')}
              aria-controls='customized-panel-content-1'
            >
              <Icon fontSize='1.25rem' icon='tabler:user' />
              <Typography sx={{ ml: 2 }}>Accordion 1</Typography>
            </AccordionSummary>
            <AccordionDetails>
              <Typography>
                Wafer sesame snaps chocolate bar candy canes halvah. Cupcake sesame snaps sweet tart dessert biscuit.
                Topping soufflé tart sweet croissant.
              </Typography>
            </AccordionDetails>
          </Accordion>

          <Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
            <AccordionSummary
              id='customized-panel-header-2'
              expandIcon={expandIcon('panel2')}
              aria-controls='customized-panel-content-2'
            >
              <Icon fontSize='1.25rem' icon='tabler:briefcase' />
              <Typography sx={{ ml: 2 }}>Accordion 2</Typography>
            </AccordionSummary>
            <AccordionDetails>
              <Typography>
                Sugar plum sesame snaps caramels. Cake pie tart fruitcake sesame snaps donut cupcake macaroon. Gingerbread
                pudding cheesecake pie ice cream.
              </Typography>
            </AccordionDetails>
          </Accordion>

          <Accordion expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>
            <AccordionSummary
              id='customized-panel-header-3'
              expandIcon={expandIcon('panel3')}
              aria-controls='customized-panel-content-3'
            >
              <Icon fontSize='1.25rem' icon='tabler:gift' />
              <Typography sx={{ ml: 2 }}>Accordion 3</Typography>
            </AccordionSummary>
            <AccordionDetails>
              <Typography>
                Gingerbread lemon drops bear claw gummi bears bonbon wafer jujubes tiramisu. Jelly pie cake. Sweet roll
                dessert sweet pastry powder.
              </Typography>
            </AccordionDetails>
          </Accordion>
        </div>
      )
    }

    export default AccordionCustomized

Additional Actions

In order to put an action such as a Checkbox or a button inside `AccordionSummary`, you need to stop the propagation of the focus and click events to prevent the accordion from expanding/collapsing when using the action.

Accordion 1

Wafer sesame snaps chocolate bar candy canes halvah. Cupcake sesame snaps sweet tart dessert biscuit. Topping soufflé tart sweet croissant.

Accordion 2

Sugar plum sesame snaps caramels. Cake pie tart fruitcake sesame snaps donut cupcake macaroon. Gingerbread pudding cheesecake pie ice cream.

Accordion 3

Gingerbread lemon drops bear claw gummi bears bonbon wafer jujubes tiramisu. Jelly pie cake. Sweet roll dessert sweet pastry powder.

    // ** React Imports
    import { useState } from 'react'

    // ** MUI Imports
    import Checkbox from '@mui/material/Checkbox'
    import Accordion from '@mui/material/Accordion'
    import Typography from '@mui/material/Typography'
    import AccordionSummary from '@mui/material/AccordionSummary'
    import FormControlLabel from '@mui/material/FormControlLabel'
    import AccordionDetails from '@mui/material/AccordionDetails'

    // ** Icon Imports
    import Icon from 'src/@core/components/icon'

    const AccordionActions = () => {
      // ** State
      const [expanded, setExpanded] = useState(false)

      const handleChange = panel => (event, isExpanded) => {
        setExpanded(isExpanded ? panel : false)
      }

      return (
        <div>
          <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
            <AccordionSummary
              id='actions-panel-header-1'
              aria-controls='actions-panel-content-1'
              expandIcon={<Icon fontSize='1.25rem' icon='tabler:chevron-down' />}
            >
              <FormControlLabel
                label='Accordion 1'
                aria-label='Acknowledge'
                control={<Checkbox disableRipple />}
                onClick={event => event.stopPropagation()}
                onFocus={event => event.stopPropagation()}
              />
            </AccordionSummary>
            <AccordionDetails>
              <Typography sx={{ color: 'text.secondary' }}>
                Wafer sesame snaps chocolate bar candy canes halvah. Cupcake sesame snaps sweet tart dessert biscuit.
                Topping soufflé tart sweet croissant.
              </Typography>
            </AccordionDetails>
          </Accordion>

          <Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
            <AccordionSummary
              id='actions-panel-header-2'
              aria-controls='actions-panel-content-2'
              expandIcon={<Icon fontSize='1.25rem' icon='tabler:chevron-down' />}
            >
              <FormControlLabel
                label='Accordion 2'
                aria-label='Acknowledge'
                control={<Checkbox disableRipple />}
                onClick={event => event.stopPropagation()}
                onFocus={event => event.stopPropagation()}
              />
            </AccordionSummary>
            <AccordionDetails>
              <Typography sx={{ color: 'text.secondary' }}>
                Sugar plum sesame snaps caramels. Cake pie tart fruitcake sesame snaps donut cupcake macaroon. Gingerbread
                pudding cheesecake pie ice cream.
              </Typography>
            </AccordionDetails>
          </Accordion>

          <Accordion expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>
            <AccordionSummary
              id='actions-panel-header-3'
              aria-controls='actions-panel-content-3'
              expandIcon={<Icon fontSize='1.25rem' icon='tabler:chevron-down' />}
            >
              <FormControlLabel
                label='Accordion 3'
                aria-label='Acknowledge'
                control={<Checkbox disableRipple />}
                onClick={event => event.stopPropagation()}
                onFocus={event => event.stopPropagation()}
              />
            </AccordionSummary>
            <AccordionDetails>
              <Typography sx={{ color: 'text.secondary' }}>
                Gingerbread lemon drops bear claw gummi bears bonbon wafer jujubes tiramisu. Jelly pie cake. Sweet roll
                dessert sweet pastry powder.
              </Typography>
            </AccordionDetails>
          </Accordion>
        </div>
      )
    }

    export default AccordionActions