How to make mui accordion expand disable in react js?

Hi Friends 👋,

Welcome To aGuideHub!

To make mui accordion expand disable in React js, you can use this code disabled={true}. It will make mui accordion expand disable in react js.

Today, I am going to show you, How make mui accordion expand disable in react js.

Installation

Install the following packages to use mui accordion in react js.

npm

npm install @mui/material @emotion/react @emotion/styled

yarn

yarn add @mui/material @emotion/react @emotion/styled

Table of contents

• Install MUI and create a new React app.
• Import Material-UI accordion.
• Disable Expand Functionality

Step 1: Install MUI and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import Material-UI accordion.

After installing MUI, you have to import your React component. To do this, add the following line to the top of your component file.

import React from 'react';
import { Accordion, AccordionDetails, AccordionSummary, Typography } from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

Step 3: Disable Expand Functionality.

You can use the accordion component in your react js. For example, The accordion component is used for collapsible panels. and use a disabled prop in accordion.

<Accordion
    disabled={true}
    >
<AccordionSummary
    expandIcon={<ExpandMoreIcon />}
    aria-controls="panel1a-content"
    id="panel1a-header"
>

MUI material make mui accordion expand disable example.

The below code is an example, to make mui accordion expand disable, you need to import accordion Component. To disable the expand functionality of Accordion, you can add a disabled prop to the Accordion component.

App.js

import React from 'react';
import { Accordion, AccordionDetails, AccordionSummary, Typography } from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

 function App() {
   return (
     <Accordion
     disabled={true}
     >
       <AccordionSummary
         expandIcon={<ExpandMoreIcon />}
         aria-controls="panel1a-content"
         id="panel1a-header"
       >
         <Typography>Accordion Title</Typography>
       </AccordionSummary>
       <AccordionDetails>
         <Typography>
           Accordion Content
         </Typography>
       </AccordionDetails>
     </Accordion>
   );
 }

 export default App;

In the above code example, I have used the @mui/material component and made mui accordion expand disable in react js.

Check the output of the above code example.

Here, we are provided code sandbox links for the above program make mui accordion expand disable in react js. Then you can use whenever you want and do the changes as per your requirements.

Try it Yourself

All the best 👍