Pesquisas recentes
Sem pesquisas recentes

Krisztian Gyuris
Entrou em 10 de jul. de 2024
·
Última atividade em 10 de jul. de 2024
Seguindo
1
Seguidores
0
Atividade total
3
Votos
1
Assinatura
1
VISÃO GERAL DA ATIVIDADE
MEDALHAS
ARTIGOS
PUBLICAÇÕES
COMENTÁRIOS NA COMUNIDADE
COMENTÁRIOS EM ARTIGOS
VISÃO GERAL DA ATIVIDADE
Atividade mais recente por Krisztian Gyuris
Krisztian Gyuris comentou,
Yes, it is possible. Here is the modified code that closes the currently open accordion automatically once a new one is clicked:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
let activeAccordions = document.querySelectorAll(".accordion-div .accordion.active");
for (let j = 0; j < activeAccordions.length; j++) {
activeAccordions[j].classList.remove("active");
activeAccordions[j].nextElementSibling.style.maxHeight = null;
}
var panel = this.nextElementSibling;
if (!this.classList.contains("active")) {
this.classList.add("active");
panel.style.maxHeight = panel.scrollHeight + "px";
} else {
this.classList.remove("active");
panel.style.maxHeight = null;
}
});
}
So when the accordion is clicked, I try first to find all currently active accordions, remove the active class, and reset the maxHeight of the panel. Then check the current panel to see if it is active and if not, the active class is added, and changing the maxHeight to scrollHeight.
I also created a sandbox to demo the component:
https://codesandbox.io/p/sandbox/friendly-julien-tvc882
Exibir comentário · Publicado 10 de jul. de 2024 · Krisztian Gyuris
0
Seguidores
0
Votos
0
Comentários