CSS와 JavaScript로 아코디언(Accordion) 만드는 방법

CSS와 JavaScript를 활용하면 클릭할 때마다 내용이 펼쳐지고 접히는 아코디언(Accordion) UI를 손쉽게 만들 수 있습니다. 아코디언은 FAQ 섹션, 사이드바 메뉴, 공지사항 목록 등에서 널리 사용되는 컴포넌트로, 제한된 화면 공간을 효율적으로 활용할 수 있다는 장점이 있습니다.

아코디언의 동작 원리

아코디언은 크게 두 가지 요소로 구성됩니다.

버튼(헤더) – 사용자가 클릭하는 영역입니다. 클릭 시 active 클래스가 토글되어 활성 상태임을 시각적으로 표시합니다.
패널(내용) – 버튼 바로 아래에 위치한 콘텐츠 영역입니다. 기본적으로 display: none;으로 숨겨져 있다가, 버튼을 클릭하면 display: block;으로 전환되어 나타납니다.

전체 예제 코드

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.demo {
   background-color: #eee;
   cursor: pointer;
   padding: 25px;
   width: 100%;
}
.active, .demo:hover {
   background-color: #ccc;
   border: 2px;
   font-size: 14px;
}
.panel {
   padding: 0 18px;
   display: none;
   background-color: #F0F8FF;
   overflow: hidden;
}
</style>
</head>
<body>
<h2>Examination</h2>
<p>Following is the information on exams:</p>
<button class="demo">Admit Card</button>
<div class="panel">
   <p>Admit Card will release on 25th March.</p>
</div>
<button class="demo">Exam Date</button>
<div class="panel">
   <p>Exam will held on 30th March.</p>
</div>
<script>
var val = document.getElementsByClassName("demo");
var i;
for (j = 0; j < val.length; j++) {
   val[j].addEventListener("click", function() {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.display === "block") {
         panel.style.display = "none";
      } else {
         panel.style.display = "block";
      }
   });
}
</script>
</body>
</html>

코드 상세 설명

1. CSS 스타일링

.demo 클래스는 아코디언 헤더 버튼의 배경색(#eee), 여백(padding: 25px), 그리고 마우스를 올렸을 때 포인터 커서가 표시되도록 설정합니다. .active 상태와 :hover 상태에서는 배경색이 #ccc로 변경되어, 현재 열려 있는 항목을 한눈에 구분할 수 있습니다.

.panel 클래스는 숨겨진 콘텐츠 영역을 담당합니다. 기본값이 display: none;이므로 페이지가 처음 로드될 때는 내용이 보이지 않습니다.

2. JavaScript 로직

getElementsByClassName("demo")를 사용해 문서 내 모든 아코디언 버튼을 가져온 뒤, 반복문으로 각 버튼에 클릭 이벤트 리스너를 등록합니다.

버튼이 클릭되면 다음 순서로 동작합니다.

classList.toggle("active")로 버튼의 활성 스타일을 켜거나 끕니다.
nextElementSibling 속성으로 버튼의 바로 다음 형제 요소, 즉 패널 div에 접근합니다.
패널의 display 값이 block이면 none으로, 그렇지 않으면 block으로 전환하여 내용을 펼치거나 접습니다.

실행 결과

위 코드를 실행하면 'Admit Card'와 'Exam Date' 두 개의 버튼이 화면에 표시되며, 초기 상태에서는 각 버튼 아래의 내용이 숨겨져 있습니다.

CSS와 JavaScript로 아코디언(Accordion) 만드는 방법 – 예제 코드로 배우기

버튼 중 하나를 클릭하면 해당 버튼 아래에 숨겨져 있던 정보가 아래와 같이 펼쳐집니다. 같은 버튼을 다시 클릭하면 내용이 접히며, 다른 버튼을 클릭하면 해당 항목이 독립적으로 열립니다.

CSS와 JavaScript로 아코디언(Accordion) 만드는 방법 – 예제 코드로 배우기

마무리

이처럼 몇 줄의 CSS와 JavaScript만으로도 별도의 라이브러리 없이 실용적인 아코디언을 구현할 수 있습니다. 여기에 CSS 트랜지션(max-height 애니메이션)을 추가하면 더욱 부드러운 펼침/접힘 효과를 연출할 수 있으니, 응용해 보시기 바랍니다.