最近の検索
最近の検索はありません

Krisztian Gyuris
参加日2024年7月10日
·
前回のアクティビティ2024年7月10日
フォロー中
1
フォロワー
0
合計アクティビティ
3
投票
1
サブスクリプション
1
アクティビティの概要
バッジ
記事
投稿
コミュニティへのコメント
記事へのコメント
アクティビティの概要
さんの最近のアクティビティ Krisztian Gyuris
Krisztian Gyurisさんがコメントを作成しました:
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
コメントを表示 · 投稿日時:2024年7月10日 · Krisztian Gyuris
0
フォロワー
0
投票
0
コメント