Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

369
Vistas
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
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda