Cách tạo: Nội dung gập/accordian

Học cách tạo accordian (nội dung cuộn lại).

Tạo accordian

Bước 1 - Thêm HTML：

<button class="accordion">Mục 1</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>
<button class="accordion">Mục 2</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>
<button class="accordion">Mục 3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

Bước 2 - Thêm CSS：

Đặt樣式 cho accordian

/* Đặt樣式 cho nút mở và đóng bảng accordian */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}
/* Nếu nút được nhấp (thêm lớp .active bằng JS), thêm màu nền và khi con trỏ鼠标悬停 trên nó (sweep) */
.active, .accordion:hover {
  background-color: #ccc;
}
/* Thêm樣式 cho bảng accordian. Lưu ý: Mặc định là ẩn */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

Bước 3 - Thêm JavaScript：

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Chuyển đổi thêm và xóa bỏ lớp "active" để nổi bật nút điều khiển bảng */
    this.classList.toggle("active");
    /* Chuyển đổi ẩn và hiển thị bảng hoạt động */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

Thử ngay

accordion hiệu ứng动画（cuộn xuống）

Để tạo hiệu ứng accordion, hãy thêm max-height: 0、overflow: hidden và max-height hiệu ứng chuyển đổi của thuộc tính này.

thì, sử dụng JavaScript để tính toán và đặt chiều cao của bảng dựa trên kích thước màn hình khác nhau của bảng. max-heightđể thực hiện hiệu ứng cuộn xuống của nội dung:

<style>
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}
</script>

Thử ngay

thêm biểu tượng

thêm một ký hiệu trên mỗi nút để chỉ ra nội dung cuộn có mở hoặc đóng:

.accordion:after {
  content: '\02795'; /* “加號”（+）的 Unicode 字符 */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* “減號”（-）的 Unicode 字符 */
}

Thử ngay