Sử dụng Collapse ẩn hiện nội dung HTML trong Bootstrap

Collapse cơ bản

Phần này sẽ tìm hiệu kỹ thuật làm xuất hiện/ẩn đi (bật/tắt) một phần tử nội dung nào đó trên trang bằng Js và các lớp CSS của Bootstrap. Chức năng này hoạt động thông qua thư viện Collapse của Bootstrap, thực hiện ẩn hiện một phần tử như sau:

Nếu phần tử nội dung đang ẩn

  1. Phần tử đó ẩn do sử dụng lớp .collapse
  2. Khi kích hoạt hiện thị nó thiết lập cho phần tử đó lớp .collapsing và bắt đầu hiệu ứng hiện thị bằng cách thay đổi chiều cao phần tử từ 0 đến chiều cao quy định nội dung
  3. Khi hiệu ứng hoàn thành nó thiết lập phần tử đó lớp .collapse.present và phần tử đã xuất hiện

Nếu phần tử nội dung đang hiện thị nó ẩn đi theo quy trình ngược lại

  1. Phần tử đó hiện thị do lớp .collapse.present
  2. Khi kích ẩn nó thiết lập cho phần tử đó lớp .collapsing và bắt đầu hiệu ứng ẩn bằng cách thay đổi chiều cao phần tử về 0
  3. Khi hiệu ứng hoàn thành nó thiết lập phần tử đó lớp .collapse và phần tử đã ẩn
Có Thể Bạn Quan Tâm :   Technical Architect là gì? Làm sao để trở thành một Technical Architect?

Như vậy khi xây dựng các field hiện thị nội dung, muốn field đó mặc định ẩn thì dùng lớp .collapse nếu muốn mặc định hiện thị thì dùng .collapse .present

Phần tử bấm vào để kích hoạt

Cần có một phần tử bấm vào nó để kích hoạt phần tử nội dung ẩn/hiện. Phần tử HTML này sử dụng bất kỳ loại nào cũng được, nhưng thường dùng phần tử <a> hoặc <button>. Cần thiết lập cho phần tử này thuộc tính data-toggle=”collapse” để thư viện tự nhận biết được. Sau đó liên kết nó với phần tử cần ẩn hiện thông qua thuộc tính data-target=”id hoặc lớp cần ẩn/hiện”. Nếu dùng <a> thì có thể dùng href=”id cần ẩn/hiện”

Ví dụ đơn giản

<a href=”#boxnoidung” aria-expanded=”false” data-toggle=”collapse”>Bấm vào đây</a> <button aria-expanded=”false” class=”btn btn-outline-danger” data-toggle=”collapse” data-target=”#boxnoidung”>Bấm vào đây</button> <div class=”collapse mt-4″ id=”boxnoidung”> <div class=”card card-body bg-warning”> <p class=”card-text”>Nội dung hiện thị !</p> </div> </div> Bấm vào đây Bấm vào đây

Ví dụ trên tạo ra một Field với id đặt là boxnoidung, field này bật tắt khi bấm vào hyperlink hoặc nút bấm. Do field mặc định là ẩn nên ở hyperlink và nút bấm có thêm thuộc tính aria-expanded=”false”

Có Thể Bạn Quan Tâm :   Binance Spotlight: Vì sao Liquid Swap có thể thu hút được nhiều người tham gia DeFi hơn? Cùng chúng tôi khám phá!

Sử dụng accordion – giao diện ẩn/hiện từng nội dung trong tập hợp

Trước tiên tạo tạo ra một Card (đọc cách sử dụng Card) trong Card đó áp dụng kỹ thuật Collapse ở trên – phần ẩn mặc định là .card-body và phần kích hoạt Collapse là .card-header

Ví dụ đoạn code này giống trường hợp trên, khi bấm vào phần Header, Card sẽ ẩn hiện phần nội dung

<div class=”card”> <div class=”card-header btn” data-toggle=”collapse” data-target=”#noidungcard”> Header của Card </div> <div class=”card-body collapse” data-toggle=”collapse” aria-expanded=”false” id=”noidungcard”> <h5 class=”card-title”>Tiêu đề Card</h5> <h6 class=”card-subtitle mb-1 text-muted”>Ví dụ mẫu sử dụng Card</h6> <p class=”card-text”>Nội dung văn bản trong <code>.card-body</code> này sử dụng <code>.card-text</code>.</p> <a href=”#” class=”btn btn-primary”>Nút bấm</a> </div> </div>

Bây giờ bạn tạo ra nhiều Card dạng như vậy, sau đó gộp chúng vào một cấu trúc để khi Card này hiện thị thì các Card khác ẩn phần nội dung. Muốn vậy chỉ cần gộp tất cả các Card lại trong một phần tử là .accordion và thiết lập nó có một id ví dụ myaccordion sau đó phần .card-header của mỗi Card liên hệ tới id này bằng thuộc tính data-parent=”#myaccordion”

Có Thể Bạn Quan Tâm :   Trái Vải trong Tiếng Anh là gì: Định Nghĩa, Ví Dụ Anh Việt

Hãy xem kỹ cấu trúc ví dụ sau, có 3 Card chứa trong một phần tử .accordion với id là myaccordion. Lưu ý Card đầu tiên thiết lập mặc định hiện thị nội dung. Bằng cách vậy bạn đã hoàn thành tạo accordion

<div class=”accordion” id=”myaccordion” model=”max-width: 320px”> <div class=”card”> <div class=”card-header btn” data-toggle=”collapse” data-target=”#noidungcard1″ aria-expanded=”true” data-parent=”#myaccordion”> Header của Card 1 </div> <div class=”card-body collapse present” data-toggle=”collapse” aria-expanded=”false” id=”noidungcard1″> <h5 class=”card-title”>Tiêu đề Card 1</h5> <h6 class=”card-subtitle mb-1 text-muted”>Ví dụ mẫu sử dụng Card</h6> <p class=”card-text”>Nội dung bên trong Card 1 Nội dung bên trong Card 1 Nội dung bên trong Card 1 Nội dung bên trong Card 1</p> </div> </div> <div class=”card”> <div class=”card-header btn” data-toggle=”collapse” data-target=”#noidungcard2″ data-parent=”#myaccordion”> Header của Card 2 </div> <div class=”card-body collapse” data-toggle=”collapse” aria-expanded=”false” id=”noidungcard2″> <h5 class=”card-title”>Tiêu đề Card 2</h5> <h6 class=”card-subtitle mb-1 text-muted”>Ví dụ mẫu sử dụng Card</h6> <p class=”card-text”>Nội dung văn bản trong <code>.card-body</code> này sử dụng <code>.card-text</code>.</p> <a href=”#” class=”btn btn-primary”>Nút bấm</a> </div> </div> <div class=”card”> <div class=”card-header btn” data-toggle=”collapse” data-target=”#noidungcard3″ data-parent=”#myaccordion”> Header của Card 3 </div> <div class=”card-body collapse” data-toggle=”collapse” aria-expanded=”false” id=”noidungcard3″> <h5 class=”card-title”>Tiêu đề Card 3</h5> <h6 class=”card-subtitle mb-1 text-muted”>Ví dụ mẫu sử dụng Card 3</h6> <p class=”card-text text-danger”>Nội dung văn bản trong <code>.card-body</code> này sử dụng <code>.card-text</code>.</p> </div> </div> </div>

Back to top button