Actualmente estoy creando una página de control de calidad usando el acordeón Jquery UI. En este momento logré hacer varios acordeones, pero el problema es que necesito que la parte (+) se convierta en (-) cuando se presiona el acordeón, y el jquery que hice hace que todos los botones (+) giren al mismo tiempo cada vez que apretó un botón de acordeón.
¿Cómo puedo hacer que el botón gire de acuerdo con cuando se colapsa su acordeón correspondiente?
Aquí está mi código simplificado
$(function() { $("#accordion").accordion({ collapsible: true }); }); $(function() { $('.qa_accordion_button').click(function() { $('.button_outer').toggleClass('pressed'); $(this).removeClass('pressed'); }); }); .button_outer { color: #ecf0f1; background: #e74c3c; width: 40px; height: 40px; border: 0; font-size: 1.5em; position: relative; border-radius: 2rem; } .button_outer .minus { position: absolute; transition: 300ms; background: white; border-radius: 2px; } .button_outer .minus:first-child { left: 25%; right: 25%; height: 10%; top: 45%; } .button_outer .minus:last-child { left: 25%; right: 25%; height: 10%; top: 45%; transform: rotate(90deg); } .pressed .minus { transform: rotate(180deg); } .pressed .minus:last-child { left: 50%; right: 50%; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css" /> <div id="accordion"> <div class="qa_accordion_button"> <p>ACCORDION BUTTON 1</p> <div class="button_outer"> <div class="minus"></div> <div class="minus"></div> </div> </div> <div class="accordion_answer"> <div class="answer_desc"> <p>ANSWER 1</p> </div> </div> <div class="qa_accordion_button"> <p>ACCORDION BUTTON 2</p> <div class="button_outer"> <div class="minus"></div> <div class="minus"></div> </div> </div> <div class="accordion_answer"> <div class="answer_desc"> <p>ANSWER 2</p> </div> </div> </div>Para hacer lo que necesita, conecte un evento a beforeActivate y create controladores de eventos del acordeón. Usando los argumentos pasados a estos controladores, puede obtener referencias a los encabezados actuales y anteriores y establecer las clases relevantes en los botones dentro de ellos.
$(function() { $("#accordion").accordion({ collapsible: true, beforeActivate: (e, ui) => { ui.newHeader.find('.button_outer').addClass('pressed'); ui.oldHeader.find('.button_outer').removeClass('pressed'); }, create: (e, ui) => { ui.header.find('.button_outer').addClass('pressed'); } }); }); .button_outer { color: #ecf0f1; background: #e74c3c; width: 40px; height: 40px; border: 0; font-size: 1.5em; position: relative; border-radius: 2rem; } .button_outer .minus { position: absolute; transition: 300ms; background: white; border-radius: 2px; } .button_outer .minus:first-child { left: 25%; right: 25%; height: 10%; top: 45%; } .button_outer .minus:last-child { left: 25%; right: 25%; height: 10%; top: 45%; transform: rotate(90deg); } .pressed .minus { transform: rotate(180deg); } .pressed .minus:last-child { left: 50%; right: 50%; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css" /> <div id="accordion"> <div class="qa_accordion_button"> <p>ACCORDION BUTTON 1</p> <div class="button_outer"> <div class="minus"></div> <div class="minus"></div> </div> </div> <div class="accordion_answer"> <div class="answer_desc"> <p>ANSWER 1</p> </div> </div> <div class="qa_accordion_button"> <p>ACCORDION BUTTON 2</p> <div class="button_outer"> <div class="minus"></div> <div class="minus"></div> </div> </div> <div class="accordion_answer"> <div class="answer_desc"> <p>ANSWER 2</p> </div> </div> </div>También tenga en cuenta que no necesita múltiples controladores de eventos document.ready: toda la lógica en la página se puede agregar a una sola.