Sụp đổ cơ bản
Phần này sẽ giới thiệu các kỹ thuật để hiển thị/ẩn (bật/tắt) các thành phần nội dung cụ thể trên một trang bằng cách sử dụng các lớp css js và bootstrap. Hàm này hoạt động thông qua thư viện thu gọn của bootstrap để hiển thị một phần tử như sau:
Nếu phần tử nội dung bị ẩn
- Sử dụng lớp .collapse để ẩn phần tử
- Khi bật hiển thị, hãy đặt phần tử thành lớp .collapse và bắt đầu hiệu ứng hiển thị bằng cách thay đổi chiều cao phần tử từ 0 thành chiều cao nội dung đã chỉ định
- Khi hiệu ứng hoàn tất, nó đặt phần tử thành lớp .collapse.show và phần tử xuất hiện
- Phần tử được hiển thị bởi lớp .collapse.show
- Khi bị ẩn, nó đặt phần tử thành lớp .collapse và bắt đầu hiệu ứng ẩn bằng cách thay đổi chiều cao phần tử thành 0
- Khi hiệu ứng hoàn tất, nó đặt phần tử thành lớp .collapse và ẩn phần tử
Nếu phần tử nội dung hiển thị thì phần tử đó sẽ bị ẩn
Vì vậy, khi xây dựng một hộp hiển thị nội dung, nếu bạn muốn hộp đó mặc định ẩn thì dùng lớp .collapse, còn nếu muốn hiển thị mặc định thì dùng .collapse .show
Nhấp vào phần tử để kích hoạt
Yêu cầu một phần tử mà khi được nhấp vào sẽ cho phép hiển thị/ẩn phần tử nội dung. Phần tử html này có thể sử dụng bất kỳ loại nào, nhưng thường là ; hoặc
Ví dụ đơn giản
Ví dụ trên tạo một hộp có id được đặt thành boxnoidung sẽ mở và đóng khi một liên kết hoặc nút được nhấp vào. Vì hộp mặc định bị ẩn nên cả liên kết và nút đều có thuộc tính aria-expanded=”false”
Sử dụng giao diện đàn accordion để ẩn/hiện từng mục trong bộ sưu tập
Đầu tiên hãy tạo một thẻ trong thẻ này (đọc cách sử dụng thẻ) áp dụng kỹ thuật gấp ở trên – phần ẩn mặc định là .card-body và trình kích hoạt thu gọn là .card-header
Mã ví dụ này giống như trên, khi click vào tiêu đề thì thẻ sẽ ẩn nội dung
Bây giờ, bạn tạo nhiều thẻ thuộc loại này và kết hợp chúng thành một cấu trúc sao cho trong khi một thẻ hiển thị thì các thẻ khác ẩn nội dung. Để thực hiện điều này, chỉ cần nhóm tất cả các thẻ trong một phần tử .accordion và đặt nó thành một id, ví dụ: myaccordion, sau đó, .card-header của mỗi thẻ sử dụng data-parent=attribute “#myaccordion” với id được liên kết
Xem kỹ cấu trúc ví dụ bên dưới, phần tử .accordion có id myaccordion chứa 3 thẻ. Lưu ý rằng thẻ đầu tiên hiển thị nội dung theo mặc định. Điều này hoàn thành việc tạo đàn accordion