CSS와 JavaScript로 접고 펼칠 수 있는 섹션(Collapsible) 구현하는 방법

CSS와 JavaScript를 함께 사용하면 클릭 한 번으로 내용을 보여주거나 숨길 수 있는 접이식 섹션(Collapsible Section)을 손쉽게 만들 수 있습니다. FAQ 목록이나 아코디언 메뉴처럼 화면 공간을 효율적으로 활용하고 싶을 때 유용하게 쓰이는 기법입니다.

아래 예제 코드를 통해 구현 방법을 자세히 살펴보겠습니다.

예제 코드

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .collapse {
        background-color: rgb(83, 186, 255);
        color: white;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 18px;
    }
    .active, .collapse:hover {
        background-color: rgb(34, 85, 160);
    }
    .content {
        padding: 0 18px;
        display: none;
        overflow: hidden;
        background-color: #b6fdff;
        font-size: 18px;
    }
</style>
</head>
<body>
<h1>Collapsible Example</h1>
<h2>아래 버튼을 클릭하면 내용이 펼쳐집니다</h2>
<button type="button" class="collapse">Open Collapsible</button>
<div class="content">
<h3>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio, ducimus!
</h3>
</div>
<script>
    var collapse = document.querySelector(".collapse");
    var i;
    collapse.addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.display === "block") {
            content.style.display = "none";
        } else {
            content.style.display = "block";
        }
    });
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 나타납니다.

CSS와 JavaScript로 접고 펼칠 수 있는 섹션(Collapsible) 구현하는 방법

동작 원리 설명

.collapse 버튼: 파란색 배경의 클릭 가능한 버튼으로, 마우스를 올리면(hover) 색상이 진해지고, 클릭되면 .active 클래스가 토글됩니다.
.content 영역: 기본적으로 display: none으로 설정되어 화면에 숨겨져 있습니다.
JavaScript 로직: 버튼 클릭 시 classList.toggle();로 활성 상태를 전환하고, nextElementSibling;으로 바로 다음 형제 요소(내용 영역)를 찾아 display; 값을 block;과 none; 사이에서 번갈아 변경합니다.

버튼을 클릭하면 숨겨져 있던 내용이 아래와 같이 펼쳐집니다.

`마무리`

이처럼 몇 줄의 CSS와 간단한 JavaScript 이벤트 리스너만으로도 접이식 섹션을 구현할 수 있습니다. 여러 개의 섹션이 필요하다면 querySelectorAll;을 사용해 모든 버튼에 동일한 이벤트를 바인딩하면 되며, 부드러운 애니메이션 효과를 원한다면 max-height; 트랜지션이나 <details>; 태그를 활용하는 방법도 고려해 볼 수 있습니다.