Tengo este botón que colapsa/expande todos los acordeones en la página cuando se hace clic. El problema es que cuando cargo la página por primera vez, solo comenzará a colapsar/expandir todo después de hacer clic por segunda vez en el botón, luego funciona con cada clic.
HTML del botón:
<Button id="collapseAll" class="btn btn-secondary">Collapse/Expand</Button>Botón JS:
$("#collapseAll").click( function() { if(!$('.accordion-header').hasClass("active")){ $('.accordion-header').removeClass("active").addClass("active"); } else { $('.accordion-header').addClass("active").removeClass("active"); } });$( document ).ready(function() { $("#collapseAll").click( function() { if(!$('.accordion-header').hasClass("active")){ $('.accordion-header').removeClass("active").addClass("active"); } else { $('.accordion-header').addClass("active").removeClass("active"); } }); });Creo que el problema está en tu código css.
puede agregar el siguiente css y debería funcionar bien ...
.accordion-header{ display:none; } .accordion-header.active{ display:block; }Valide si coincide con su requerimiento. También puede consultar el enlace http://accordion-cd.blogspot.com/
$(document).ready(function () { $("#accordion").accordion({ collapsible:true, }); var icons = $( "#accordion" ).accordion( "option", "icons" ); $('.open').click(function () { $('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({ 'aria-selected': 'true', 'tabindex': '0' }); $(this).attr("disabled","disabled"); $('.close').removeAttr("disabled"); }); });