I'm a Junior developer, this is my first question here
I'm using a Controlled accordion because I need the icon to change dynamically but I want it to stay open when I expand a panel, even if I have expanded another panel like the basic does.
I understand that it has to do with the handleChange function but its logic is beyond me for now
I'm working with React
Any ideas ?
const [expanded, setExpanded] = React.useState(false);
const handleChange = (panel) => (event, isExpanded) => {
setExpanded(isExpanded ? panel : false);
};
{grant?.generalRequirementsDetails.length ? (
<div className="grant-info-items">
<MuiAccordion
expanded={expanded === 'panel1'}
onChange={handleChange('panel1')}
>
<AccordionSummary
expandIcon={
expanded ? (
<img src={lessSVG} alt="less" />
) : (
<img src={moreSVG} alt="more" />
)
}
aria-controls="panel1bh-content"
id="panel1bh-header"
>
<h3 sx={{ width: '33%', flexShrink: 0 }}>
Requisitos generales
</h3>
</AccordionSummary>
<AccordionDetails>
{grant?.generalRequirementsDetails.map(
(item, idx) => (
<div key={idx} className="grant-item">
<img src={tickSVG} />
<p>{item}</p>
</div>
),
)}
</AccordionDetails>
</MuiAccordion>
</div>
) : null}
I have another couple of panels similar to this one so when I click on one and then another I want both to be open unless I click on one of them again and that panel collapses like in the basic accordion
here is the link of the MUI component i'm talking about: https://mui.com/components/accordion/
Thank you for your help !