최근 검색


최근 검색 없음

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

댓글