最近の検索


最近の検索はありません

Krisztian Gyuris's Avatar

Krisztian Gyuris

参加日2024年7月10日

·

前回のアクティビティ2024年7月10日

フォロー中

1

フォロワー

0

合計アクティビティ

3

投票

1

サブスクリプション

1

アクティビティの概要

さんの最近のアクティビティ Krisztian Gyuris

Krisztian Gyurisさんがコメントを作成しました:

コミュニティのコメント Discussion - Tips and best practices from the community

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

コメント