[JS] 아코디언 메뉴 활용

<section id="project_items">
	<article class="item">
            <div class="content">
              <figure>
                <video></video>
              </figure>
              <div class="txt">
                <h1 class="box_title">제목</h1>
                <p>
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                </p>
              </div>
            </div>
            <div class="detail">
              <p>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Repellendus iste exercitationem autem non quidem quo
              </p>
            </div>
          </article>
          <article>
          ...
          </article>
</section>

1. article.item을 클릭하면 article.item에 .open 클래스 값을 추가
2. .open 클래스 값이 붙으면 div.detail부분이 display: none에서 display : block으로 변경될 수 있도록 지정

JS

const detail = document.querySelectorAll(".detail");
const item = document.querySelectorAll(".item");

for (i = 0; i < item.length; i++) {
  item[i].addEventListener("click", function () {
    this.lastElementChild.classList.toggle("open");
  });
}

CSS

.detail{
	display : none;
      }
   
.detail.open{
	display : block
    }

⇒item의 갯수만큼 반복문을 돌려 클릭된 item의 마지막 요소에 .open을 추가했다가 제거할 수 있도록 toggle함수 사용
하지만 이 코드는 해당 article을 다시 눌러야지만 .open요소가 사라지게됨.

---

📌내가 원했던 기능

클릭된 article에만 .open이 붙으면 다른 article에는 .open이 제거되어 하나의 article만 열릴 수 있도록 하기

detail부분에 .open요소를 추가하는 방식으로 e.nextElementSibling로 detail부분을 불러와 .open의 contain을 판단하려 했으나.. error....
다음 형제 요소를 찾지 못한다.. 왜인지는.. 아직.. 찾지 못함.....

• currentTarget 활용
  e.currentTarget -> 선택된 요소의 최상위 부모요소를 불러옴

function toggleAccodion(e){
	console.log(e.currentTarget.classList);
    
    }

console창
DOMTokenList ['item', value: 'item']

👉 JS
만약 선택된 요소에 .open이 포함되어 있다면 .open제거
그렇지 않다면 item들을 순회해 .open제거하고 선택된 요소에는 .open추가

const content = document.querySelectorAll(".content");
const item = document.querySelectorAll(".item");

item.forEach((e)=>{
	e.addEventListener("click", toggleAccodion);
}

function toggleAccodion(e){
	let detailbox = e.currentTarget.classList;
    
    if (detailbox.contains("open")) {
    detailbox.remove("open");
  } else {
    item.forEach(function (e) {
      e.classList.remove("open");
    });
    detailbox.add("open");
  }
 }

CSS

.detail{
	display : none;
      }
   
.item.open .detail{
	display : block
    }

.item에 .open이 붙을 때 .detail이 display : block이 될 수 있도록