Expansion Panel

Expansion Panels contain creation flows and allow lightweight editing of an element.

Simple Expansion Panel

To show this type of Expansion Panel you will need this code in down here.

     
 <ExpansionPanel>
        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon/>}>
            <Typography className={classes.heading}>Expansion Panel 1</Typography>
        </ExpansionPanelSummary>
        <ExpansionPanelDetails>
            <Typography>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
                sit amet blandit leo lobortis eget.
            </Typography>
        </ExpansionPanelDetails>
    </ExpansionPanel>
    <ExpansionPanel>
        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon/>}>
            <Typography className={classes.heading}>Expansion Panel 2</Typography>
        </ExpansionPanelSummary>
        <ExpansionPanelDetails>
            <Typography>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
                sit amet blandit leo lobortis eget.
            </Typography>
        </ExpansionPanelDetails>
    </ExpansionPanel>
    <ExpansionPanel disabled>
        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon/>}>
            <Typography className={classes.heading}>Disabled Expansion Panel</Typography>
        </ExpansionPanelSummary>
</ExpansionPanel>
  

Available parameters, type and descriptions are down below.

Name	Type	Default	Description
children *	node		The content of the expansion panel.
classes	object		Useful to extend the style applied to components.
CollapseProps	object		Properties applied to the Collapse element.
defaultExpanded	bool	false	If true, expands the panel by default.
disabled	bool	false	If true, the panel will be displayed in a disabled state.
expanded	bool		If true, expands the panel, otherwise collapse it. Setting this prop enables control over the panel.
onChange	func		Callback fired when the expand/collapse state is changed. Signature: function(event: object, expanded: boolean) => void event: The event source of the callback expanded: The expanded state of the panel