Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

368
Views
Material-UI: How to make a Controlled accordion behaves like a Basic accordion

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 !

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!