AccordionSummary

Overview

To open or close the widget, you must click on the label that the AccordionSummary Component represents. Same as AccordionDetails, only after Accordion gets set up then AccordionSummary can be generated accordingly.

Please refer to this for more information: https://mui.com/material-ui/api/accordion-summary/.

Import

CODE

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

The above source will be imported automatically after dragging and dropping Basic Component to the UI Preview Panel.

Property

Property:

Name	Default	Description
Id-name	Placeholder: <id-name>	The Id-name of the created component.
State	State: Normal	The State of the created Component.
Margin and Padding	Size Unit: Px	The component Margin and Padding with many selectable Size Units.
Layout	Position: None Size Unit: Px	The component Layout includes Position and Top - Right - Bottom - Left size with many selectable Size Units.
Text	Font-family: None Font-weight: None Size Unit: Px Text-align: Left	The component Text includes Font-family, Font-size, Font-weight, Font-color, Text-align.
General	Visibility: None Opacity: 100%	The component General set up including Visibility, Opacity, and Background.
Advanced Style		The component Advanced Style includes Classname, and Inline Style addition.

Code Sample:

CODE

<div>
  <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header">
          <Typography>Accordion 1</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </AccordionDetails>
  </Accordion>
  <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel2a-content"
          id="panel2a-header">
          <Typography>Accordion 2</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </AccordionDetails>
  </Accordion>
  <Accordion disabled>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel3a-content"
          id="panel3a-header">
          <Typography>Disabled Accordion</Typography>
        </AccordionSummary>
  </Accordion>
</div>

Because Accordion contains AccordionDetails, AccordionDetails will not appear when Accordion has not been built yet.

Please click session below to understand more about relationship between Accordion, AccordionDetails and AccordionSummary.

Related Component

Accordion