Ẩn hiện nội dung bằng javascript

Bạn muốn làm một trang hướng dẫn chung về sử dụng website, diễn đàn,… Hoặc chẳng hạn một trang các câu hỏi thường gặp đi kèm câu trả lời. Thường thấy kiểu hướng dẫn này sẽ liệt kê những câu hỏi và ẩn các câu trả lời đi. Mục đích là để người dùng có thể lướt nhanh toàn bộ nội dung chính và chỉ nhấp vào nội dung chi tiết cần xem để mở chúng. Không cần xem nữa thì nhấp thêm một lần để ẩn (show hide). Chúng ta sẽ giải quyết vấn đề với chỉ một đoạn javascript và css kết hợp.

1 Ẩn hiện show hide nội dung không có hiệu ứng trượt

Kiểu ẩn hiện show hide này sẽ mở hoặc đóng nhanh câu trả lời mà không cần thời gian di trượt.

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  margin-bottom: 10px;
  width:600px;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
  width:600px;
}

Hướng dẫn chung
Câu hỏi 1

  
Câu trả lời 1 


Câu hỏi 2

  
Câu trả lời 2

Câu hỏi 3

  
Câu trả lời 3

Câu hỏi 4

  
Câu trả lời 4

Ở phần HTML, chúng ta sẽ thay đổi nội dung trang thay cho Câu hỏi 1,2,3,4…Câu trả lời 1,2,3,4…
Chúng ta cũng có thể tạo thêm nhiều nội dung nữa bằng cách thêm mã HTML tương tự.
Phần CSS giúp ta tùy biến màu sắc, kích thước,… cho nội dung cần hiển thị.

2 Ẩn hiện show hide nội dung với hiệu ứng trượt

Gần như tương tự trường hợp 1, chỉ thay đổi một vài chỗ trong phần CSS và javascript. Phần HTML vẫn giữ nguyên.

Để thêm dấu + – khi ẩn hiện nội dung, chúng ta bổ sung thêm đoạn CSS sau. Phần sau content chính là mã HTML của dấu + -, chúng ta có thể thay bằng ký hiệu khác nếu muốn.

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

Mã đầy đủ sẽ như sau.

Hướng dẫn chung

Câu hỏi 1

  
Câu trả lời 1


Câu hỏi 2

  
Câu trả lời 2

Câu hỏi 3

  
Câu trả lời 3

Câu hỏi 4

  
Câu trả lời 4

Kết quả sẽ được như bên dưới

Hướng dẫn chung

Câu hỏi 1

Câu trả lời 1

Câu hỏi 2

Câu trả lời 2

Câu hỏi 3

Câu trả lời 3

Câu hỏi 4

Câu trả lời 4

Vậy là chúng ta đã có một bảng hướng dẫn cho người dùng. Rất nhẹ nhàng, đơn giản mà không cần plugin hay dịch vụ nào hỗ trợ. Chúc các bạn thành công và hãy để lại bình luận bên dưới nếu gặp bất kỳ trở ngại nào.

Xem thêm: Tạo mục lục thủ công cho bài viết không cần plugin