선택한 div에서만 hide 클래스를 토글하려면 클릭 이벤트를 설정해야 합니다. 예를 들어, + 기호를 클릭했을 때 특정 div를 숨기거나 다시 보이게 하는 경우를 생각해 볼 수 있습니다.
폰트 + 또는 − 아이콘을 사용하려면 먼저 Font Awesome 라이브러리를 연결해야 합니다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
다음은 + 기호를 클릭할 때 hide 클래스를 토글하는 전체 코드입니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/fontawesome.min.css">
<style>
.hideDiv {
display: none;
}
</style>
</head>
<body>
<div class="firstDetails">
<h2 class="customer-track">Customer 1<i class="fa fa-plus"></i></h2>
<div>
<p class="customer">John</p>
<p class="customer">US</p>
</div>
<div class="secondDetails">
<h2 class="customer-track">Customer 2 <i class="fa fa-plus"></i></h2>
<div>
<p class="customer">David</p>
<p class="customer">AUS</p>
</div>
</div>
</div>
<script>
$(".fa-plus").on("click", function(){
$(this).parent().siblings('.secondDetails').toggleClass("hideDiv");
});
</script>
</body>
</html>실행 방법
위 프로그램을 실행하려면 파일 이름을 “index.html”로 저장한 후 파일을 마우스 오른쪽 버튼으로 클릭합니다. 그런 다음 VS Code 편집기에서 “Open with Live Server” 옵션을 선택하면 됩니다.
출력 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
“Customer 1” 옆의 플러스(+) 아이콘을 클릭하면 아래와 같이 Customer 2 div가 사라지는 것을 확인할 수 있습니다.
핵심은 jQuery의 toggleClass() 메서드입니다. 클릭된 + 아이콘(.fa-plus)의 부모 요소에서 형제(siblings) 중 .secondDetails 클래스를 가진 요소만 찾아 hide 클래스를 토글하므로, 선택한 div에만 효과가 적용됩니다.