Accordion

Overview

An Accordion Component in website design depicts a number of headers layered on top of one another. These headers will either expose or hide associated content depending on whether they are clicked (or when a keyboard shortcut or screen reader is used). If used effectively and paired with the appropriate material, an accordion can provide a better user experience.

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

Import

CODE

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

The above source will be imported automatically after dragging and dropping Accordion to the UI Preview Panel.
When you drag and drop AccordionView, then Accordion, AccordionDetails and AccordionSummary would be generated fast and automatically.

Property

Property:

Name	Default Value	Description
Id-name	Placeholder: <id-name>	The Id-name of the created component.
State	State: Normal	The State of the created ccomponent.
Margin and Padding	Size Unit: Px	The component Margin and Padding with many selectable Size Units.
Size	Size Unit: Px	The component Size of Width and Height with many selectable Size Units.
Layout	Position: None	The component Layout includes Position and Top - Right - Bottom - Left with many selectable Size Units.
General	Disabled: False DefaultExpanded: False Expanded: False Visibility: None Opacity: 100%	The component General includes Disabled, defaultExpanded, Expanded, Visibility, Opacity, and Background.
Advanced Style		The component Advanced Style includes Classname and Inline Style addition.

For detailed information about PROPERTIES panel, please visit this page below:

Properties

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>

Note:

Accordion would contain two API component: AccordionDetails and AccordionSummary.
Only after Accordion gets set up, the relevant AccordionDetails and AccordionSummary could be generated accordingly.

Related components