Boa noite pessoal, tenho esse código em javascript:
var acc = document.getElementsByClassName(“accordion”); var i;
for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight){ panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); }
Ele controla um button que ao clicar surge uma div, ou seja um button expansível, o meu problema é que ao utilizar no ionic foi necessário eu criar um método, e por isso para que funcione a expansão é necessário que eu clique 2 vezes, código no typescript:
expandable(){ var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight){ panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } }
HTML no ionic:
<p style="text-align: center; font-size: 20px;">Projetos</p> <div *ngFor="let item of projeto"> <button (click)="expandable()" class="accordion" >Projeto: {{item.tituloProjeto}}</button> <div class="panel"> <p> Descricao: {{item.descricaoProjeto}}</p> <br/> <p> Preco: {{item.preco}}</p> <br/> <p> Data: {{item.data}}</p> <br/> </div> </div>
como poderia arrumar isso? lembrando que com js puro e html e eu colocando o js na mesma página funciona normal.