Ricerche recenti
Nessuna ricerca recente

Krisztian Gyuris
Data ingresso 10 lug 2024
·
Ultima attività 10 lug 2024
Seguiti
1
Follower
0
Attività totali
3
Voto
1
Abbonamento
1
PANORAMICA ATTIVITÀ
BADGE
ARTICOLI
POST
COMMENTI NELLA COMMUNITY
COMMENTI AGLI ARTICOLI
PANORAMICA ATTIVITÀ
Ultima attività di Krisztian Gyuris
Krisztian Gyuris ha commentato,
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
Visualizza commento · Data ultimo post: 10 lug 2024 · Krisztian Gyuris
0
Follower
0
Voti
0
Commenti