[js] 자바스크립트 아코디언(toggle 메서드를 이용한 단순 아코디언)

See the Pen Untitled by youngwan2 (@youngwan2) on CodePen.

HTML

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">
      <h3>제목 1</h3>
    </div>
    <div class="accordion-content">
      <p>내용 1</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">
      <h3>제목 2</h3>
    </div>
    <div class="accordion-content">
      <p>내용 2</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">
      <h3>제목 3</h3>
    </div>
    <div class="accordion-content">
      <p>내용 3</p>
    </div>
  </div>
</div>

 

CSS

.accordion {
  font-family: Arial, sans-serif;
  width: 100%;
  background-color: #f6f6f6; /* 배경색 지정 */
}

.accordion-item {
  border: 1px solid #ddd;
  margin-bottom: 10px;
}


.accordion-header {
  background-color: #eee;
  color: #333;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.accordion-header h3 {
  margin: 0;
}

.accordion-content {
  display: none;
  padding: 10px;
}

.accordion-item.active .accordion-content {
  display: block;
}

 

JS

태그요소.classList  는 해당 태그요소의 클래스 속성에 접근하겠다는 의미로 이해하면 된다.

toggle('추가하고자 하는 클래스명') 메서드는 classList 가 가진 여러 메서드 중에서 하나로 해당 요소에 입력이 생기면 (  ) 안에 입력한 텍스트가 새로운 클래스명으로 해당 태그요소의 클래스 속성의 값으로 추가된다. 

 

반대로 클래스가 추가된 상태에서 다시 클릭하면 추가된 클래스의 값이 삭제된다. 이를 이용하면 클릭 때 마다 클래스가 추가/ 삭제 가 교차되어 이루어지기 때문에 새롭게 추가된 클래스명에 따로 css 코드를 적용한다면, 간단하게 아코디언 메뉴를 만들 수 있다. 

const accordionItems = document.querySelectorAll(".accordion-item");

// 아코디언 항목을 순회하면서 제목 부분을 클릭하면 해당 제목 태그의 클래스로 active 추가/삭제
accordionItems.forEach((item) => {
  const header = item.querySelector(".accordion-header");
  header.addEventListener("click", () => {
    item.classList.toggle("active");
  });
});