Hướng dẫn - Thủ thuật

Tạo nút ẩn hiện nội dung quá dài bằng CSS 3

Trong phần này, Baobinh.net xin được hướng dẫn các bạn sử dụng CSS 3 để làm một box ẩn hiện nội dung. Phần này rất hữu dụng khi làm các trang như Câu hỏi thường gặp, danh sách nội dung dài,...

Nội dung ẩn hiện để tránh bị quá dài cho nội dung website là một hiệu ứng được chúng ta sử dụng rất nhiều. Nếu dùng javascript ngoài việc code js ra thì chúng ta sẽ làm nặng website thêm 1 chút. Thay vì thế chúng ta hoàn toàn có thể thực hiện được hiệu ứng này bằng CSS 3.

Mỗi một phần ẩn hiện nội dung đều có 3 phần tử cơ bản:

1. Ô checkbox: Sử dụng input tag, có id là duy nhất và đại diện cho phần ẩn hiện đó
2. Tiêu đề: Sử dụng thẻ label có thuộc tính for là ô checkbox để khi click vào tiêu đề hiệu ứng cũng được thực hiện.
3. Nội dung: chứa nội dung cần ẩn hiện.

Sau đây chúng ta sẽ đến với phần code HTML hiển thị

<input class="toggle-box" id="identifier-1" type="checkbox" >
<label for="identifier-1">Click để hiển thị nội dung rất dài!</label>
<div>Đây là phần nội dung rất dài, dài lê thê, dài ngoằng ngoẵng, dài kinh khủng.</div>

Phần CSS:

.toggle-box {
  display: none;
}

.toggle-box + label {
  cursor: pointer;
  display: block;
  font-weight: bold;
  line-height: 21px;
  margin-bottom: 5px;
}

.toggle-box + label + div {
  display: none;
  margin-bottom: 10px;
}

.toggle-box:checked + label + div {
  display: block;
}

.toggle-box + label:before {
  background-color: #4F5150;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  color: #FFFFFF;
  content: "+";
  display: block;
  float: left;
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  margin-right: 5px;
  text-align: center;
  width: 20px;
}

.toggle-box:checked + label:before {
  content: "\2212";
}
Hiển thị sẽ được như sau:



XEM DEMO:  Tạo nội dung ẩn hiện bằng CSS 3

Link download: Tại đây

Mật khẩu: baobinh.net