Để chuyển đổi lớp ẩn chỉ trên div được chọn, bạn cần đặt sự kiện trên nút nhấp. Giả sử bạn cần ẩn một div cụ thể khi nhấp vào dấu +.
Để lấy biểu tượng + hoặc -, bạn cần liên kết font-awesome:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
Dưới đây là mã để chuyển đổi lớp ẩn khi nhấp vào dấu +:
Ví dụ
<!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">Khách hàng 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">Khách hàng 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>
Để chạy chương trình trên, lưu tệp với tên "anyName.html (index.html)" và nhấp chuột phải vào tệp. Chọn tùy chọn "Open with Live Server" trong trình soạn thảo VS Code.
Kết quả
Chương trình sẽ cho ra kết quả sau:
Sau khi nhấp vào biểu tượng cộng bên cạnh "Khách hàng 1", bạn sẽ nhận được kết quả sau tức là div Khách hàng 2 sẽ biến mất:
