// ** MUI Imports import Grid from '@mui/material/Grid' import Typography from '@mui/material/Typography' // ** Custom Components Imports import CardSnippet from 'src/@core/components/card-snippet' // ** Demo Components Imports import AccordionSimple from 'src/views/components/accordion/AccordionSimple' import AccordionActions from 'src/views/components/accordion/AccordionActions' import AccordionControlled from 'src/views/components/accordion/AccordionControlled' import AccordionCustomized from 'src/views/components/accordion/AccordionCustomized' // ** Source code imports import * as source from 'src/views/components/accordion/AccordionSourceCode' const Accordion = () => { return ( `1px solid ${theme.palette.divider}` }} > Use Accordion, AccordionSummary and AccordionDetails components to make a simple accordion. `1px solid ${theme.palette.divider}` }} > Manage expanded prop with the help of a state. `1px solid ${theme.palette.divider}` }} > Use styled hook to customize the component the way you want it. `1px solid ${theme.palette.divider}` }} > 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. ) } export default Accordion