¿Hay alguna manera de colapsar/expandir todos los acordeones con un clic de botón? Lo probé con un simple botón que elimina la clase activa y agrega la clase activa, pero no funcionó en absoluto. Solo puedo abrirlos todos a la vez, pero no colapsar de nuevo y luego abrirlos de nuevo.
mi botón actual:
$("#collapseAll").click( function() { $(".accordion-header").removeClass("active").addClass("active"); });mi js:
$('.js-accordion dt, .js-toggle').on('click tap', function(){ $($(this).data('target') ? $(this).data('target') : $(this)).toggleClass('active'); });y mi html
<dl class="accordion js-accordion" data-toggle="accordion-header"> {{#each accordion}} <div id="{{anchor}}-div"> <dt class="accordion-header{{#if active}} active{{/if}}"> <h3 class="accordion-item-title"{{#if anchor}} id="{{anchor}}"{{/if}}>{{{title}}}</h3> <span class="accordion-item-icon"></span> </dt> <dd class="accordion-body"> <div class="accordion-item-content"> {{#if textblock}} {{#each textblock}} <p>{{{.}}}</p> {{/each}} {{/if}} <p>{{#if anchor}}<a href="#{{anchor}}" class="faq-anchor">{{../../page-contents.section-main.texts.permalink}}</a>{{/if}}</p> <p><a href="#top">{{../../page-contents.section-main.texts.to_top}}</a></p> </div> </dd> </div> {{/each}} </dl>Lo hice solo con este código.
$("#collapseAll").click( function() { let button = document.getElementById("collapseAll"); if(!$('.accordion-header').hasClass("active")){ $('.accordion-header').removeClass("active").addClass("active"); button.innerHTML = 'Collapse all' } else { $('.accordion-header').addClass("active").removeClass("active"); button.innerHTML = 'Expand all' } });¡también con cambiar el texto del botón!