아코디언 메뉴 만들기(Accordion Menu Using HTML, CSS and JavaScript)

 

1. 아코디언 메뉴란 무엇인가요?

아코디언 메뉴는 여러 항목 중 하나의 항목이 확장되어 내용이 표시되고, 다른 항목들은 축소되어 내용이 감추어지는 기능입니다.

아코디언 메뉴를 활용하면 다음과 유사하게 FAQ를 만들 수 있습니다.

 

 

지금부터 간단한 아코디언 메뉴를 만드는 방법을 알아봅시다.

 

 

 

 

2. 아코디언용 HTML 마크업

구조는 간단합니다. li 요소 내부에는 두 개의 div가 있고, 각각 질문과 답변을 나타냅니다.

그리고 button이 있어서 각 항목을 여닫을 수 있습니다.

 

 <li class="faq active">
    <div class="faq__question">
      <h3 class="faq__title">
        What is HTML?
      </h3>
    </div>
    <div class="faq__answer">
      <p class="faq__text">
        HTML is the standard markup language for creating Web pages.
      </p>
    </div>
    <button class="faq__btn">
      <span class="faq__icon open">+</span>
      <span class="faq__icon close">-</span>
    </button>
  </li>

 

 

 

 

3. 아코디언용 CSS 스타일링

답변이 처음에는 보이지 않다가, faq가 active 되면 보이도록 만들어야 합니다.

faq__answer 요소의 max-height을 0으로 주었다가 faq가 active되면 200px로 변경합니다.

 

.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

.faq.active .faq__answer {
  max-height: 200px;
  border-top: 1px solid silver;
  transition: max-height 0.3s ease-in-out;
}

 

 

그리고 버튼을 클릭하고 닫을 때 아이콘이 변경되도록 만듭니다.

active 상태에 따라 버튼 안의 close와 open 아이콘의 display 상태를 변경해서 아이콘을 전환합니다.

.faq__icon.close {
  display: none;
}

.faq.active .faq__icon.close {
  color: #ffffff;
  display: block;
}

.faq.active .faq__icon.open {
  display: none;
}

 

 

 

 

4. 아코디언에 JavaScript 추가하기

정적인 아코디언에 인터랙션을 추가해봅시다.

사용자가 버튼을 클릭할 때 답변이 표시/비표시되도록 active 클래스를 토글하려고 합니다.

 

 

우선 각 버튼을 NodeList로 받아옵시다.

const btns = document.querySelectorAll(".faq__btn");

 

 

forEach 메서드로 각각의 버튼을 순회하면서 클릭 이벤트를 등록합니다.
이때, 버튼 자체가 아닌 parentNode에 active 클래스를 토글할 것입니다.

 

활성화된 요소를 다시 클릭하면 해당 항목을 닫기 위해서 contains 메서드를 활용해 active 클래스가 있는지 확인합니다.

닫힌 항목일 때만 active 클래스를 추가해 활성화합니다.

btns.forEach((btn) => {
  btn.addEventListener("click", () => {
    const faqItem = btn.parentNode;
    const isActive = faqItem.classList.contains("active");

    removeActiveClasses();

    if (!isActive) {
      faqItem.classList.add("active");
    }
  });
});

 

 

다른 항목을 클릭했을 때 열려있는 항목을 닫을 수 있도록 active 클래스를 제거합니다.

function removeActiveClasses() {
  btns.forEach((btn) => {
    btn.parentNode.classList.remove("active");
  });
}

 

 

 

 

5. ✨ 완성된 코드를 확인하세요!

See the Pen Accordion Menu by cona-tus (@cona-tus) on CodePen.