Nội dung chính
Ví dụ về show / hide content in jQuery:
Trong ví dụ này, chúng ta sử dụng hàm show() và hide() để xử lý hiện, ẩn nội dung khi click.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
function collapse(id) {
$("#off-" + id).hide();
$("#on-" + id).show();
$("#content-" + id).hide();
}
function expand(id) {
$("#on-" + id).hide();
$("#off-" + id).show();
$("#content-" + id).show();
}
</script>
</head>
<body>
<div id="off-d1" onclick="collapse('d1');">Hide_D1</div>
<div id="on-d1" onclick="expand('d1');" style="display: none;">Show_D1</div>
<div id="content-d1">
<p>If you click on the "Hide_D1" button, I will disappear.</p>
</div>
<div id="off-d2" onclick="collapse('d2');">Hide_D2</div>
<div id="on-d2" onclick="expand('d2');" style="display: none;">Show_D2</div>
<div id="content-d2">
<p>If you click on the "Hide_D2" button, I will disappear.</p>
</div>
<div id="off-d3" onclick="collapse('d3');">Hide_D3</div>
<div id="on-d3" onclick="expand('d3');" style="display: none;">Show_D3</div>
<div id="content-d3">
<p>If you click on the "Hide_D3" button, I will disappear.</p>
</div>
</body>
</html>
Kết quả: