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 thành phần 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 thành phần như sau:

Nếu thành phần nội dung đang ẩn

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

Nếu thành phần nội dung đang hiện thị nó ẩn đi theo quy trình trái lại

1. Thành phần đó hiện thị do lớp .collapse.show
2. Khi kích ẩn nó thiết lập cho thành phần đó lớp .collapsing và khai mạc hiệu ứng ẩn bằng phương pháp thay đổi độ cao thành phần về 0
3. Khi hiệu ứng hoàn thành nó thiết lập thành phần đó lớp .collapse và thành phần đã ẩn

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

Thành phần nhấn vào để kích hoạt

Cần có một thành phần nhấn vào nó để kích hoạt thành phần nội dung ẩn/hiện. Thành phần HTML này sử dụng bất kỳ loại nào thì cũng được, nhưng thường dùng thành phần <avàgt; hoặc <buttonvàgt;. Cấp thiết lập cho thành phần này tính chất data-toggle=”collapse” để thư viện tự nhận diện được. Sau đó liên kết nó với thành phần cần ẩn hiện thông qua tính chất data-target=”id hoặc lớp cần ẩn/hiện”. Nếu dùng <avàgt; 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”>Nhấn vào đâyvàlt;/avàgt; <button aria-expanded=”false” class=”btn btn-outline-danger” data-toggle=”collapse” data-target=”#boxnoidung”>Nhấn vào đâyvàlt;/buttonvàgt; <div class=”collapse mt-4″ id=”boxnoidung”> <div class=”card card-body bg-warning”> <p class=”card-text”>Nội dung hiện thị !</pvàgt; </divvàgt; </divvàgt; Nhấn vào đây Nhấn vào đây

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

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 đó ứng 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 nhấn 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 </divvàgt; <div class=”card-body collapse” data-toggle=”collapse” aria-expanded=”false” id=”noidungcard”> <h5 class=”card-title”>Tiêu đề Cardvàlt;/h5vàgt; <h6 class=”card-subtitle mb-1 text-muted”>Ví dụ mẫu sử dụng Cardvàlt;/h6vàgt; <p class=”card-text”>Nội dung văn bản trong <codevàgt;.card-bodyvàlt;/codevàgt; này sử dụng <codevàgt;.card-textvàlt;/codevàgt;.</pvàgt; <a href=”#” class=”btn btn-primary”>Nút bấmvàlt;/avàgt; </divvàgt; </divvàgt;

Lúc bấy giờ bạn tạo ra nhiều Card dạng như vậy, sau đó gộp chúng vào trong 1 cấu trúc để khi Card này hiện thị thì những Card khác ẩn phần nội dung. Muốn vậy chỉ việc gộp tất cả những Card lại trong một thành phần 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 tính chất data-parent=”#myaccordion”

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

<div class=”accordion” id=”myaccordion” style=”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 </divvàgt; <div class=”card-body collapse show” data-toggle=”collapse” aria-expanded=”false” id=”noidungcard1″> <h5 class=”card-title”>Tiêu đề Card 1vàlt;/h5vàgt; <h6 class=”card-subtitle mb-1 text-muted”>Ví dụ mẫu sử dụng Cardvàlt;/h6vàgt; <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 1vàlt;/pvàgt; </divvàgt; </divvàgt; <div class=”card”> <div class=”card-header btn” data-toggle=”collapse” data-target=”#noidungcard2″ data-parent=”#myaccordion”> Header của Card 2 </divvàgt; <div class=”card-body collapse” data-toggle=”collapse” aria-expanded=”false” id=”noidungcard2″> <h5 class=”card-title”>Tiêu đề Card 2vàlt;/h5vàgt; <h6 class=”card-subtitle mb-1 text-muted”>Ví dụ mẫu sử dụng Cardvàlt;/h6vàgt; <p class=”card-text”>Nội dung văn bản trong <codevàgt;.card-bodyvàlt;/codevàgt; này sử dụng <codevàgt;.card-textvàlt;/codevàgt;.</pvàgt; <a href=”#” class=”btn btn-primary”>Nút bấmvàlt;/avàgt; </divvàgt; </divvàgt; <div class=”card”> <div class=”card-header btn” data-toggle=”collapse” data-target=”#noidungcard3″ data-parent=”#myaccordion”> Header của Card 3 </divvàgt; <div class=”card-body collapse” data-toggle=”collapse” aria-expanded=”false” id=”noidungcard3″> <h5 class=”card-title”>Tiêu đề Card 3vàlt;/h5vàgt; <h6 class=”card-subtitle mb-1 text-muted”>Ví dụ mẫu sử dụng Card 3vàlt;/h6vàgt; <p class=”card-text text-danger”>Nội dung văn bản trong <codevàgt;.card-bodyvàlt;/codevàgt; này sử dụng <codevàgt;.card-textvàlt;/codevàgt;.</pvàgt; </divvàgt; </divvàgt; </divvàgt;