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
- Phần tử đó ẩn do sử dụng lớp
.collapse - Khi kích hoạt hiện thị nó thiết lập cho phần tử đó lớp
.collapsingvà 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 - Khi hiệu ứng hoàn thành nó thiết lập phần tử đó lớp
.collapse.showvà 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 nó ẩn đi theo quy trình ngược lại
- Phần tử đó hiện thị do lớp
.collapse.show - Khi kích ẩn nó thiết lập cho phần tử đó lớp
.collapsingvà bắt đầu hiệu ứng ẩn bằng cách thay đổi chiều cao phần tử về 0 - Khi hiệu ứng hoàn thành nó thiết lập phần tử đó lớp
.collapsevà phần tử đã ẩ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
0Header của CardTiêu đề Card Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.
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ử
1 hoặcHeader của CardTiêu đề Card Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.
2. Cần thiết lập cho phần tử này thuộc tínhHeader của CardTiêu đề Card Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.
3 để 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ínhHeader của CardTiêu đề Card Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.
4. Nếu dùngHeader của CardTiêu đề Card Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.
1 thì có thể dùngHeader của CardTiêu đề Card Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.
6Header của CardTiêu đề Card Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.
Ví dụ đơn giản
Bấm vào đây Bấm vào đâyNội dung hiện thị !
Bấm vào đây
Ví dụ trên tạo ra một Box với
7 đặt làHeader của CardTiêu đề Card Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.
8, box này bật tắt khi bấm 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 thuộc tínhHeader của CardTiêu đề Card Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.
9Header của CardTiêu đề Card Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.
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à
0 và phần kích hoạt Collapse làHeader của Card 1Tiêu đề Card 1 Ví dụ mẫu sử dụng CardNộ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
Header của Card 2Tiêu đề Card 2 Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.Header của Card 3Tiêu đề Card 3 Ví dụ mẫu sử dụng Card 3Nội dung văn bản trong
.card-bodynày sử dụng.card-text.
1Header của Card 1Tiêu đề Card 1 Ví dụ mẫu sử dụng CardNộ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
Header của Card 2Tiêu đề Card 2 Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.Header của Card 3Tiêu đề Card 3 Ví dụ mẫu sử dụng Card 3Nội dung văn bản trong
.card-bodynày sử dụng.card-text.
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
Tiêu đề CardVí dụ mẫu sử dụng CardNội dung văn bản trong
0 này sử dụngHeader của Card 1Tiêu đề Card 1 Ví dụ mẫu sử dụng CardNộ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
Header của Card 2Tiêu đề Card 2 Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.Header của Card 3Tiêu đề Card 3 Ví dụ mẫu sử dụng Card 3Nội dung văn bản trong
.card-bodynày sử dụng.card-text.
3.Header của Card 1Tiêu đề Card 1 Ví dụ mẫu sử dụng CardNộ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
Header của Card 2Tiêu đề Card 2 Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.Header của Card 3Tiêu đề Card 3 Ví dụ mẫu sử dụng Card 3Nội dung văn bản trong
.card-bodynày sử dụng.card-text.
Nút bấm
Header của CardTiêu đề Card Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.
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à
4 và thiết lập nó có một id ví dụHeader của Card 1Tiêu đề Card 1 Ví dụ mẫu sử dụng CardNộ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
Header của Card 2Tiêu đề Card 2 Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.Header của Card 3Tiêu đề Card 3 Ví dụ mẫu sử dụng Card 3Nội dung văn bản trong
.card-bodynày sử dụng.card-text.
5 sau đó phầnHeader của Card 1Tiêu đề Card 1 Ví dụ mẫu sử dụng CardNộ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
Header của Card 2Tiêu đề Card 2 Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.Header của Card 3Tiêu đề Card 3 Ví dụ mẫu sử dụng Card 3Nội dung văn bản trong
.card-bodynày sử dụng.card-text.
1 của mỗi Card liên hệ tớiHeader của Card 1Tiêu đề Card 1 Ví dụ mẫu sử dụng CardNộ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
Header của Card 2Tiêu đề Card 2 Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.Header của Card 3Tiêu đề Card 3 Ví dụ mẫu sử dụng Card 3Nội dung văn bản trong
.card-bodynày sử dụng.card-text.
7 này bằng thuộc tínhHeader của CardTiêu đề Card Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.
8Header của Card 1Tiêu đề Card 1 Ví dụ mẫu sử dụng CardNộ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
Header của Card 2Tiêu đề Card 2 Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.Header của Card 3Tiêu đề Card 3 Ví dụ mẫu sử dụng Card 3Nội dung văn bản trong
.card-bodynày sử dụng.card-text.
Hãy xem kỹ cấu trúc ví dụ sau, có 3 Card chứa trong một phần tử
4 với id làHeader của Card 1Tiêu đề Card 1 Ví dụ mẫu sử dụng CardNộ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
Header của Card 2Tiêu đề Card 2 Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.Header của Card 3Tiêu đề Card 3 Ví dụ mẫu sử dụng Card 3Nội dung văn bản trong
.card-bodynày sử dụng.card-text.
5. 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 accordionTiêu đề Card 1Ví dụ mẫu sử dụng CardHeader của Card 1Tiêu đề Card 1 Ví dụ mẫu sử dụng CardNộ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
Header của Card 2Tiêu đề Card 2 Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.Header của Card 3Tiêu đề Card 3 Ví dụ mẫu sử dụng Card 3Nội dung văn bản trong
.card-bodynày sử dụng.card-text.
Nội dung văn bản trong
0 này sử dụngHeader của Card 1Tiêu đề Card 1 Ví dụ mẫu sử dụng CardNộ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
Header của Card 2Tiêu đề Card 2 Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.Header của Card 3Tiêu đề Card 3 Ví dụ mẫu sử dụng Card 3Nội dung văn bản trong
.card-bodynày sử dụng.card-text.
3.Nút bấmVí dụ mẫu sử dụng CardHeader của Card 1Tiêu đề Card 1 Ví dụ mẫu sử dụng CardNộ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
Header của Card 2Tiêu đề Card 2 Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.Header của Card 3Tiêu đề Card 3 Ví dụ mẫu sử dụng Card 3Nội dung văn bản trong
.card-bodynày sử dụng.card-text.
Nội dung văn bản trong
0 này sử dụngHeader của Card 1Tiêu đề Card 1 Ví dụ mẫu sử dụng CardNộ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
Header của Card 2Tiêu đề Card 2 Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.Header của Card 3Tiêu đề Card 3 Ví dụ mẫu sử dụng Card 3Nội dung văn bản trong
.card-bodynày sử dụng.card-text.
3.Header của Card 1Tiêu đề Card 1 Ví dụ mẫu sử dụng CardNộ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
Header của Card 2Tiêu đề Card 2 Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.Header của Card 3Tiêu đề Card 3 Ví dụ mẫu sử dụng Card 3Nội dung văn bản trong
.card-bodynày sử dụng.card-text.
Nút bấm
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à4 và thiết lập nó có một id ví dụHeader của Card 1Tiêu đề Card 1 Ví dụ mẫu sử dụng CardNộ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
Header của Card 2Tiêu đề Card 2 Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.Header của Card 3Tiêu đề Card 3 Ví dụ mẫu sử dụng Card 3Nội dung văn bản trong
.card-bodynày sử dụng.card-text.
5 sau đó phầnHeader của Card 1Tiêu đề Card 1 Ví dụ mẫu sử dụng CardNộ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
Header của Card 2Tiêu đề Card 2 Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.Header của Card 3Tiêu đề Card 3 Ví dụ mẫu sử dụng Card 3Nội dung văn bản trong
.card-bodynày sử dụng.card-text.
1 của mỗi Card liên hệ tớiHeader của Card 1Tiêu đề Card 1 Ví dụ mẫu sử dụng CardNộ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
Header của Card 2Tiêu đề Card 2 Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.Header của Card 3Tiêu đề Card 3 Ví dụ mẫu sử dụng Card 3Nội dung văn bản trong
.card-bodynày sử dụng.card-text.
7 này bằng thuộc tínhHeader của CardTiêu đề Card Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.
8Hãy xem kỹ cấu trúc ví dụ sau, có 3 Card chứa trong một phần tửHeader của Card 1Tiêu đề Card 1 Ví dụ mẫu sử dụng CardNộ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
Header của Card 2Tiêu đề Card 2 Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.Header của Card 3Tiêu đề Card 3 Ví dụ mẫu sử dụng Card 3Nội dung văn bản trong
.card-bodynày sử dụng.card-text.
4 với id làHeader của Card 1Tiêu đề Card 1 Ví dụ mẫu sử dụng CardNộ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
Header của Card 2Tiêu đề Card 2 Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.Header của Card 3Tiêu đề Card 3 Ví dụ mẫu sử dụng Card 3Nội dung văn bản trong
.card-bodynày sử dụng.card-text.
5. 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 accordionHeader của Card 1Tiêu đề Card 1 Ví dụ mẫu sử dụng CardNộ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
Header của Card 2Tiêu đề Card 2 Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.Header của Card 3Tiêu đề Card 3 Ví dụ mẫu sử dụng Card 3Nội dung văn bản trong
.card-bodynày sử dụng.card-text.
Nội dung văn bản trong
0 này sử dụngHeader của Card 1Tiêu đề Card 1 Ví dụ mẫu sử dụng CardNộ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
Header của Card 2Tiêu đề Card 2 Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.Header của Card 3Tiêu đề Card 3 Ví dụ mẫu sử dụng Card 3Nội dung văn bản trong
.card-bodynày sử dụng.card-text.
3.Nút bấmHeader của Card 1Tiêu đề Card 1 Ví dụ mẫu sử dụng CardNộ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
Header của Card 2Tiêu đề Card 2 Ví dụ mẫu sử dụng CardNội dung văn bản trong
Nút bấm.card-bodynày sử dụng.card-text.Header của Card 3Tiêu đề Card 3 Ví dụ mẫu sử dụng Card 3Nội dung văn bản trong
.card-bodynày sử dụng.card-text.