Phương thức toggle() trong JQuery

• Bùi Tấn Lực
• 129
• 19/12/2025

Phương thức toggle() trong JQuery dùng để ẩn hiện thuộc tính display trong css, chuyển đổi qua lại giữa none và block, chi tiết như nào hãy cùng chúng tôi phân tích:

Chức năng của Phương thức toggle() trong JQuery

Phương thức toggle() trong JQuery dùng để ẩn hiện thuộc tính display trong css, chuyển đổi qua lại giữa none và block, chuyển đổi qua lại giữa 2 hàm hide() và show().

Cú pháp của Phương thức toggle() trong JQuery

bochon.toggle();

bochon: Bộ chọn của JQuery, đó có thể là 1 id, 1 class, hoặc 1 phần tử HTML.

bochon.toggle(thoigian);

bochon: Bộ chọn của JQuery, đó có thể là 1 id, 1 class, hoặc 1 phần tử HTML.

thoigian: Thời gian có thể là số giây hoặc fast (nhanh), slow (chậm).

bochon.toggle(thoigian,hamcon);

bochon: Bộ chọn của JQuery, đó có thể là 1 id, 1 class, hoặc 1 phần tử HTML.

thoigian: Thời gian có thể là số giây hoặc fast (nhanh), slow (chậm).

hamcon: Hàm con dùng để xử lý sự kiện sau khi ẩn, hiện.

Code Phương thức toggle() trong JQuery

Phương thức toggle() không tham số trong JQuery

Không cần truyền tham số vào phương thức:

<!--Ẩn, Hiện phần tử HTML có id là toggleid-->
<p id="toggleid">Nội dung trong ID</p>
<button id="nuttoggleid">ẨN, HIỆN ID</button>
<p>Click ẨN, HIỆN ID để ẩn, hiện phần tử HTML có id là toggleid</p>

<!--Ẩn, Hiện những phần tử HTML có class là classp-->
<p class="classp">Nội dung trong class</p>
<p class="classp">Nội dung trong class</p>
<p class="classp">Nội dung trong class</p>
<button id="nutanclassp">ẨN, HIỆN CLASS</button>
<p>Click ẨN, HIỆN CLASS để ẩn, hiện những phần tử HTML có class là classp</p>

<!--Ẩn, Hiện những thẻ P-->
<p>Nội dung trong thẻ P</p>
<p>Nội dung trong thẻ P</p>
<button id="nutanthep">ẨN, HIỆN THẺ P</button>
<p>Click ẨN, HIỆN THẺ P để ẩn, hiện những thẻ P</p>

<script src="https://webmoi.vn/media/js/jquery-2.2.1.js"></script>
<script>
// Ẩn, Hiện phần tử HTML có id là toggleid
$('#nuttoggleid').click(function(e) {
  $('#toggleid').toggle();		
});

// Ẩn những phần tử HTML có class là classp
$('#nutanclassp').click(function(e) {
  $(".classp").toggle();		
});

// Ẩn những thẻ P
$('#nutanthep').click(function(e) {
  $("p").toggle();		
});
</script>

Chạy Thử

Phương thức toggle() truyền 1 tham số trong JQuery

Tham số truyền vào có thể là số giây hoặc (slow là chậm) hoặc (fast là nhanh):

<!--Ẩn, Hiện chậm phần tử HTML có id là anhienslow-->
<p id="anhienslow">Nội dung được ẩn slow (chậm) - hide("slow")</p>
<button id="nutanhienslow">ẨN, HIỆN SLOW</button>
<p>Click ẨN, HIỆN SLOW để ẩn chậm phần tử HTML có id là anhienslow</p>

<!--Ẩn, Hiện nhanh phần tử HTML có id là anhienfast-->
<p id="anhienfast">Nội dung được ẩn, hiện fast (nhanh) - hide("fast")</p>
<button id="nutanhienfast">ẨN, HIỆN FAST</button>
<p>Click ẨN, HIỆN FAST để ẩn, hiện nhanh phần tử HTML có id là anhienfast</p>

<!--Ẩn, Hiện phần tử HTML có id là anhientime với thời gian là 1 giây (1000)-->
<p id="anhientime">Nội dung được ẩn, hiện với thời gian là 1 giây (1000)</p>
<button id="nutanhientime">ẨN, HIỆN 1 GIÂY</button>
<p>Click ẨN, HIỆN 1 GIÂY để ẩn phần tử HTML có id là anhientime</p>
<script src="https://webmoi.vn/media/js/jquery-2.2.1.js"></script>
<script>
// Ẩn, Hiện chậm phần tử HTML có id là anhienslow
$('#nutanhienslow').click(function(e) {
  $('#anhienslow').toggle("slow");		
});

// Ẩn, Hiện nhanh phần tử HTML có id là anhienfast
$('#nutanhienfast').click(function(e) {
  $('#anhienfast').toggle("fast");		
});

// Ẩn, Hiện 1 giây phần tử HTML có id là anhientime
$('#nutanhientime').click(function(e) {
  $('#anhientime').toggle(1000);		
});
</script>

Chạy Thử

Phương thức toggle() truyền 2 tham số trong JQuery

Tham số thứ 1 truyền vào có thể là số giây hoặc (slow là chậm) hoặc (fast là nhanh), tham số thứ 2 là một hàm con dùng để xử lý sau khi ẩn, hiện:

<!--Ẩn, Hiện chậm phần tử HTML có id là anhienslow-->
<p id="anhienslow">Nội dung được ẩn slow (chậm) - hide("slow")</p>
<button id="nutanhienslow">ẨN, HIỆN SLOW</button>
<p>Click ẨN, HIỆN SLOW để ẩn chậm phần tử HTML có id là anhienslow</p>

<!--Ẩn, Hiện nhanh phần tử HTML có id là anhienfast-->
<p id="anhienfast">Nội dung được ẩn, hiện fast (nhanh) - hide("fast")</p>
<button id="nutanhienfast">ẨN, HIỆN FAST</button>
<p>Click ẨN, HIỆN FAST để ẩn, hiện nhanh phần tử HTML có id là anhienfast</p>

<!--Ẩn, Hiện phần tử HTML có id là anhientime với thời gian là 1 giây (1000)-->
<p id="anhientime">Nội dung được ẩn, hiện với thời gian là 1 giây (1000)</p>
<button id="nutanhientime">ẨN, HIỆN 1 GIÂY</button>
<p>Click ẨN, HIỆN 1 GIÂY để ẩn phần tử HTML có id là anhientime</p>
<script src="https://webmoi.vn/media/js/jquery-2.2.1.js"></script>
<script>
// Ẩn, Hiện chậm phần tử HTML có id là anhienslow
$('#nutanhienslow').click(function(e) {
  $('#anhienslow').toggle("slow", function() { 
    alert("Phần tử đã được ẩn, hiện!");
  });				
});

// Ẩn, Hiện nhanh phần tử HTML có id là anhienfast
$('#nutanhienfast').click(function(e) {
  $('#anhienfast').toggle("fast", function() { 
    alert("Phần tử đã được ẩn, hiện!");
  });						
});

// Ẩn, Hiện 1 giây phần tử HTML có id là anhientime
$('#nutanhientime').click(function(e) {
  $('#anhientime').toggle(1000, function() { 
    alert("Phần tử đã được ẩn, hiện!");
  });						
});
</script>

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Phương thức toggle() trong JQuery.

Bùi Tấn Lực

Chia sẻ nội dung đánh giá của bạn về Phương thức toggle() trong JQuery
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đăng ký tư vấn thiết kế website

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn