demo : https://www.lenlop123.com/2020/09/141-show-hide-toggle-hoc-jquery-co-ban.html

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<script src="https://code.jquery.com/jquery-3.6.1.min.js"
  integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

<div id="div_1" style="background-color: violet;width: 50px;height: 50px;"></div>

<input id="btn_hide" type="button" value="Hide">
<input id="btn_show" type="button" value="Show">
<input id="btn_toggle" type="button" value="toggle ">
<br><br>

<input id="btn_hide_slow" type="button" value="Hide slow">
<input id="btn_show_slow" type="button" value="Show slow">
<br><br>

<input id="btn_hide_callback" type="button" value="Callback callback">
<input id="btn_show_callback" type="button" value="Callback callback">
<br><br>


<script>
  // Ẩn tức thì
  $("#btn_hide").click(function () {
    $("#div_1").hide();
  });


  // Hiện tức thì
  $("#btn_show").click(function () {
    $("#div_1").show();
  });

   // toggle - hiding and showing an element
   $("#btn_toggle").click(function () {
    $("#div_1").toggle();
  });

  // Ẩn slow
  $("#btn_hide_slow").click(function () {
    $("#div_1").hide(1000);
  });


  // Hiện slow
  $("#btn_show_slow").click(function () {
    $("#div_1").show(1000);
  });


  // Ẩn và xử lý
  $("#btn_hide_callback").click(function () {
    $("#div_1").hide("slow", function () {
      alert("Hàm hide đã chạy xong");
    });
  });


  // Hiện và xử lý
  $("#btn_show_callback").click(function () {
    $("#div_1").show("slow", function () {
      alert("Hàm show đã chạy xong");
    });
  });


</script>

1. Cú pháp hide và show trong jQuery

Hàm hide chỉ đơn giản là thiết lập thuộc tính CSS display:none cho phần tử được chỉ định. Ngược lại, hàm show() sẽ khôi phục lại thuộc tính display, thường là display blockinline hoặc inline-block.

Cú pháp như sau:

Bài viết này được đăng tại [free tuts .net]

1
2
3
$(selector).hide(speed,callback);
 
$(selector).show(speed,callback);

Trong đó:

  • selector chính là các phẩn tử HTML được chỉ định.
  • speed là tốc độ ẩn và hiển thị. Mặc định là 0 nếu bạn không nhập.
  • callback là một hàm sẽ được gọi sau khi hàm hide hoặc hàm show thực hiện xong.

Ví dụ: Viết chương trình jQuery sử dụng hide() và show() để ẩn và hiện nội dung của các thẻ p.

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){
    // Ẩn các thẻ p khi click vào button hide
    $(".hide-btn").click(function(){
        $("p").hide();
    });
     
    // Hiện các thẻ p khi click vào button show
    $(".show-btn").click(function(){
        $("p").show();
    });
});


2. Một vài ví dụ khác với hàm hide và show trong jQuery

Chúng ta sẽ làm thêm một vài demo khác nữa nhé.

Ví dụ 1: Ẩn / hiện thẻ div với tốc độ là 1 giây.

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function () {
    // Ẩn các thẻ p khi click vào button hide
    $(".hide-btn").click(function () {
        $("div").hide(1000);
    });
 
    // Hiện các thẻ p khi click vào button show
    $(".show-btn").click(function () {
        $("div").show(1000);
    });
});


Đơn vị của thời gian là miliseconds nhé các bạn. 1 giây = 1000 miliseconds.

Ví dụ 2: Sử dụng các từ khóa về tốc độ "fast" và "slow".

  • fast = 200 miliseconds
  • slow = 600 miliseconds
1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function () {
    // Ẩn các thẻ p khi click vào button hide
    $(".hide-btn").click(function () {
        $("div").hide("fast");
    });
 
    // Hiện các thẻ p khi click vào button show
    $(".show-btn").click(function () {
        $("div").show("slow");
    });
});


3. Sử dụng hàm callback trong show và hide

Tham số callback chính là một hàm, hàm này sẽ được gọi ngay sau khi hàm show và hide kết thúc.

Ví dụ dưới đây sẽ hiển thị thông báo cho bạn biết là hai hàm show và hide đã hoàn thành.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function () {
    // Ẩn các thẻ p khi click vào button hide
    $(".hide-btn").click(function () {
        $("div").hide("slow", function(){
            alert("Hàm hide đã chạy xong");
        });
    });
 
    // Hiện các thẻ p khi click vào button show
    $(".show-btn").click(function () {
        $("div").show("slow", function(){
            alert("Hàm show đã chạy xong");
        });
    });
});


Hàm này rất hữu ích khi bạn muốn thực hiện một công việc nào đó sau khi hai hàm trên thực hiện xong.