**Technology used:**FuseReact,React I have created a form. On the button click the accordion has to popup. Issue The accordion is not popping up on button click.Since i have created an Accordion it is just getting displayed on the page as an accordion.I is not popping up on button click. Output- I want the accordion to get displayed only on button click. I am pasting my code below:

import React from 'react';
import {
    createStyles,
    fade,
    theme,
    makeStyles,
  } from '@material-ui/core/styles';
  import Button from '@material-ui/core/Button';
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 useStyles=makeStyles((theme)=>{
    createStyles({
       Button:{
           position:"absolute",
           minWidth:200,
           marginTop:100
       },
    })
  })
  const handleClick = () => {

        setOpen(true);
    };
export default function Groupbutton(){
    const classes = useStyles();
    const [click1,setClick1]=React.useState('')
    const handleClick=(event)=>{
    setClick1(event.target.value)
    }
    return(
        <span className={classes.Button}>
      <Button 
      labelid="simple_demo_button"
      id="demo-button"
      value={click1}
      onClick={handleClick}
      variant="contained"
      color="primary"
      >
    Click
    </Button>
      <Accordion open={open} style={{marginTop:50,color:"white",backgroundColor:"grey",width:1000}}>
        <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>
    </span>
  );
}

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Please help!!

CodePudding user response：

I think useState for accordion open state is missing. Try to add

const [open, setOpen] = useState(false)

inside Groupbutton