Skip to main content
Skip table of contents

AccordionDetails

Overview

AccordionDetails is an interactive widget that may be closed or opened enclosed by the Accordion Details Component. In IDE, only after Accordion gets set up on Source Codes, then AccordionDetails can be generated accordingly. You need to drag and drop Accordion first; then you can keep continuing with AccordionDetails.

AccordionDetail will be displayed after clicking on Division 2 (For the below example).

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

Import

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

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

Properties

Properties:

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 with many selectable Size Units.

Text

Font-family: None

Font-weight: None

Text-align: Left

Size Unit: Px

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

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.