웹 개발에서 버튼 클릭 한 번으로 특정 요소를 숨겼다가 다시 보여주는 토글(Toggle) 기능은 매우 자주 사용됩니다. JavaScript에서는 요소의 style.display 속성 값을 확인하고 변경하는 방식으로 이 기능을 간단하게 구현할 수 있습니다.
요소의 display 값이 none이면 화면에서 숨겨진 상태이므로 block으로 변경해 표시하고, 그렇지 않으면 none으로 설정해 숨기는 조건문을 활용하면 됩니다.
예제 코드
<!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;
}
button {
padding: 10px;
border: none;
background-color: rgb(51, 51, 192);
color: white;
font-size: 18px;
}
.div-visible {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: rgb(210, 230, 173);
margin-top: 20px;
font-size: 18px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>숨기기와 표시 토글 예제</h1>
<button class="toggleDisplay">Div 숨기기</button>
<h2>위 버튼을 클릭하면 아래 div 요소가 숨겨집니다</h2>
<div class="div-visible">
This is a div element
</div>
<script>
document.querySelector(".toggleDisplay").addEventListener("click", toggleDivDisplay);
function toggleDivDisplay() {
var x = document.querySelector(".div-visible");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
'Div 숨기기' 버튼을 클릭하면 아래와 같이 해당 div 요소가 화면에서 사라지는 것을 확인할 수 있습니다.
코드 작동 원리
1. querySelector로 버튼을 선택한 후 addEventListener를 통해 클릭 이벤트에 toggleDivDisplay 함수를 연결합니다.
2. 버튼을 클릭하면 함수가 실행되어 대상 div 요소의 현재 display 스타일 값을 읽어옵니다.
3. 값이 none(숨김 상태)이라면 block으로 변경하여 요소를 다시 표시하고, 그 외의 경우에는 none으로 변경하여 요소를 숨깁니다.
4. 이 과정이 클릭할 때마다 반복되면서 숨기기와 표시가 번갈아 전환되는 토글 효과가 완성됩니다.
이 방식은 아코디언 메뉴, 드롭다운 패널, 모달 창 열고 닫기 등 다양한 UI 인터랙션의 기본이 되므로 꼭 익혀두면 유용합니다.