JavaScript 아코디언 메뉴 만들기

정말 간단하게 JavaScript로 아코디언 메뉴를 만들어보자!

<div class="container">
      <button id="btn-collapse">Collapse All</button>
      <h2>Title</h2>
      <section id="contents">
        <div class="panel-question active">
          <div class="panel-heading">+ Lorem ipsum dolor sit?</div>
          <div class="panel-body" id="thisone">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad
              aliquid voluptate fugit quaerat non molestiae quo magni soluta
              minima corporis! Soluta, ipsa et.
            </p>
            <p>Quos quibusdam, nesciunt totam ullam quasi neque!</p>
          </div>
        </div>

        <div class="panel-question">
          <div class="panel-heading">+ Lorem ipsum dolor sit?</div>
          <div class="panel-body">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad
              aliquid voluptate fugit quaerat non molestiae quo magni soluta
              minima corporis! Soluta, ipsa et.
            </p>
            <p>Quos quibusdam, nesciunt totam ullam quasi neque!</p>
          </div>
        </div>

위의 코드에서 panel-question 에 active가 활성화 된 부분은 패널-바디가 열리고,
active가 없는 panel-question 은 닫히게 만드려고 한다.
또한 button으로 모든 panel-question이 닫히는 기능을 추가한다.

let panelQuestion = document.querySelectorAll('.panel-question');
/* 모든 패널의 active를 제거하고 해당 panel에만 active 추가 */
let collapseBtn = document.querySelector('#btn-collapse');

function closeAll() {
  for (let j = 0; j < panelQuestion.length; j++) {
    panelQuestion[j].classList.remove('active');
  }
}

for (let i = 0; i < panelQuestion.length; i++) {
  panelQuestion[i].addEventListener('click', function () {
    closeAll();
    this.classList.add('active');
  });
}

collapseBtn.addEventListener('click', function () {
  closeAll();
});

panel-question을 모두 불러오는 querySelectorAll을 사용하여 panelQuestion을 선언한다.
그 후 panelQuestion 배열의 모든 요소를 검사해야 하므로, for문을 이용한다.
for문 안에서는 클릭하면 모든 panel-question의 바디를 닫고 해당 요소에만 this를 추가하도록 넣는다.

마찬가지로 button을 querySelector로 collapseBtn으로 선언하고 위와 같은 for문을 작성하여 모든 panel-question이 닫히도록 한다.

두 개의 실행에서 반복되는 부분을 function closeAll()로 따로 함수를 선언하여 재사용한다.