Estoy usando el acordeón Bootstrap en mi aplicación stenciljs de la siguiente manera:

 <div class="ba-accordion"> <div class="accordion-item"> <div class="accordion-header" id="kpf-accordion-nachrichtenverlauf-heading"> <button class="accordion-button" id="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#kpf-accordion-nachrichtenverlauf-panel" aria-expanded="false" aria-controls="kpf-accordion-nachrichtenverlauf-panel" onClick={()=>{this._nachrichtenVerlaufPanelClickHandler()}} > <p class="kpf-nachrichtenverlauf">Message History</p> </button> </div> <div id="kpf-accordion-nachrichtenverlauf-panel" class="accordion-collapse collapse" aria-labelledby="kpf-accordion-nachrichtenverlauf-heading" > <div class="accordion-body"> </div> </div> </div> </div>

Funciona correctamente cuando pruebo localmente con npm start, pero cuando ejecuto la aplicación en el servidor nginx, se abre una vez y no se cierra. Al analizar los elementos en el navegador, veo que el elemento del panel div con id = "kpf-accordion-nachrichtenverlauf-panel" siempre tiene el show de clase y si lo elimino directamente en el navegador, se cierra, pero si lo hago programáticamente, no pasa nada. y el acordeón permanece abierto. El siguiente es el código del controlador de clics de Javascript:

 private _nachrichtenVerlaufPanelClickHandler() { var nachrichtenVerlaufHeading = document.getElementById('accordion-button'); var panel = document.getElementById('kpf-accordion-nachrichtenverlauf-panel') if(nachrichtenVerlaufHeading.getAttribute('aria-expanded') === "true") { console.log("INSIDE THE IF"); panel.classList.remove('show'); } }

El comportamiento es el mismo en Edge y Chrome. ¿Cómo puedo arreglar esto?