How to make mui accordion expand only on icon click in react js?

Hi Friends 👋,

Welcome To aGuideHub!

To make mui accordion expand only on icon click in React js, you can use this code pointerEvents component. It will make mui accordion expand only on icon click in react js.

Today, I am going to show you, how make mui accordion expand only on icon click 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: Implement Icon Click Expansion.

You can use the accordion component in your react js. For example, The accordion component is used for collapsible panels. You can use this sx props and pointerEvents property is set to "none".

const accordionProps = {
  sx: {
    pointerEvents: "none"
  },
  expandIcon: (
    <ExpandMoreIcon
      sx={{
        pointerEvents: "auto"
      }}
    />
  )
};

MUI material make mui accordion expand only on icon click example.

The below code is an example, to make mui accordion expand only on icon click in accordion, you need to import accordion Component. By extending the AccordionProps object as a prop for the Accordion component, you can apply defined styles and use the specified detailed icon configuration.

App.js

import * as React from "react";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import Typography from "@mui/material/Typography";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";

const accordionProps = {
  sx: {
    pointerEvents: "none"
  },
  expandIcon: (
    <ExpandMoreIcon
      sx={{
        pointerEvents: "auto"
      }}
    />
  )
};

export default function SimpleAccordion() {
  return (
    <div>
      <Accordion>
        <AccordionSummary {...accordionProps}>
          <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>
    </div>
  );
}

In the above code example, I have used the @mui/material component and made mui accordion expand only on icon click 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 only on icon click in react js. Then you can use whenever you want and do the changes as per your requirements.

Try it Yourself

All the best 👍