Vor Kurzem aufgerufene Suchen
Keine vor kurzem aufgerufene Suchen

Krisztian Gyuris
Beigetreten 10. Juli 2024
·
Letzte Aktivität 10. Juli 2024
Folge ich
1
Follower
0
Gesamtaktivitäten
3
Stimme
1
Abonnement
1
AKTIVITÄTSÜBERSICHT
BADGES
BEITRÄGE
POSTS
COMMUNITY-KOMMENTARE
BEITRAGSKOMMENTARE
AKTIVITÄTSÜBERSICHT
Neueste Aktivität von Krisztian Gyuris
Krisztian Gyuris hat einen Kommentar hinterlassen
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
Kommentar anzeigen · Gepostet 10. Juli 2024 · Krisztian Gyuris
0
Follower
0
Stimmen
0
Kommentare