Hướng dẫn collapse css - thu gọn css

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.show 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 nó ẩn đi theo quy trình ngược lại

1. Phần tử đó hiện thị do lớp .collapse.show
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

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

    

        Header của Card
    
    

        
Tiêu đề Card
        
Ví dụ mẫu sử dụng Card
        
Nội dung văn bản trong .card-body này sử dụng .card-text.
        Nút bấm
    

0

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ử

    

        Header của Card
    
    

        
Tiêu đề Card
        
Ví dụ mẫu sử dụng Card
        
Nội dung văn bản trong .card-body này sử dụng .card-text.
        Nút bấm
    

1 hoặc

    

        Header của Card
    
    

        
Tiêu đề Card
        
Ví dụ mẫu sử dụng Card
        
Nội dung văn bản trong .card-body này sử dụng .card-text.
        Nút bấm
    

2. Cần thiết lập cho phần tử này thuộc tính

    

        Header của Card
    
    

        
Tiêu đề Card
        
Ví dụ mẫu sử dụng Card
        
Nội dung văn bản trong .card-body này sử dụng .card-text.
        Nút bấm
    

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ính

    

        Header của Card
    
    

        
Tiêu đề Card
        
Ví dụ mẫu sử dụng Card
        
Nội dung văn bản trong .card-body này sử dụng .card-text.
        Nút bấm
    

4. Nếu dùng

    

        Header của Card
    
    

        
Tiêu đề Card
        
Ví dụ mẫu sử dụng Card
        
Nội dung văn bản trong .card-body này sử dụng .card-text.
        Nút bấm
    

1 thì có thể dùng

    

        Header của Card
    
    

        
Tiêu đề Card
        
Ví dụ mẫu sử dụng Card
        
Nội dung văn bản trong .card-body này sử dụng .card-text.
        Nút bấm
    

6

Ví dụ đơn giản

Bấm vào đây

Bấm vào đây


    

        
Nội dung hiện thị !
    

Bấm vào đây

Ví dụ trên tạo ra một Box với

    

        Header của Card
    
    

        
Tiêu đề Card
        
Ví dụ mẫu sử dụng Card
        
Nội dung văn bản trong .card-body này sử dụng .card-text.
        Nút bấm
    

7 đặt là

    

        Header của Card
    
    

        
Tiêu đề Card
        
Ví dụ mẫu sử dụng Card
        
Nội dung văn bản trong .card-body này sử dụng .card-text.
        Nút bấm
    

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ính

    

        Header của Card
    
    

        
Tiêu đề Card
        
Ví dụ mẫu sử dụng Card
        
Nội dung văn bản trong .card-body này sử dụng .card-text.
        Nút bấm
    

9

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à

    
    

        

            Header của Card 1
        
        

            
Tiêu đề Card 1
            
Ví dụ mẫu sử dụng Card
            
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
        
    
    
    
    

        

            Header của Card 2
        
        

            
Tiêu đề Card 2
            
Ví dụ mẫu sử dụng Card
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
            Nút bấm
        
    
    
    
    

        

            Header của Card 3
        
        

            
Tiêu đề Card 3
            
Ví dụ mẫu sử dụng Card 3
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
        
    
    

0 và phần kích hoạt Collapse là

    
    

        

            Header của Card 1
        
        

            
Tiêu đề Card 1
            
Ví dụ mẫu sử dụng Card
            
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
        
    
    
    
    

        

            Header của Card 2
        
        

            
Tiêu đề Card 2
            
Ví dụ mẫu sử dụng Card
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
            Nút bấm
        
    
    
    
    

        

            Header của Card 3
        
        

            
Tiêu đề Card 3
            
Ví dụ mẫu sử dụng Card 3
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
        
    
    

1

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 đề Card

Ví dụ mẫu sử dụng Card

Nội dung văn bản trong

    
    

        

            Header của Card 1
        
        

            
Tiêu đề Card 1
            
Ví dụ mẫu sử dụng Card
            
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
        
    
    
    
    

        

            Header của Card 2
        
        

            
Tiêu đề Card 2
            
Ví dụ mẫu sử dụng Card
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
            Nút bấm
        
    
    
    
    

        

            Header của Card 3
        
        

            
Tiêu đề Card 3
            
Ví dụ mẫu sử dụng Card 3
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
        
    
    

0 này sử dụng

    
    

        

            Header của Card 1
        
        

            
Tiêu đề Card 1
            
Ví dụ mẫu sử dụng Card
            
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
        
    
    
    
    

        

            Header của Card 2
        
        

            
Tiêu đề Card 2
            
Ví dụ mẫu sử dụng Card
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
            Nút bấm
        
    
    
    
    

        

            Header của Card 3
        
        

            
Tiêu đề Card 3
            
Ví dụ mẫu sử dụng Card 3
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
        
    
    

3.

Nút bấm

    

        Header của Card
    
    

        
Tiêu đề Card
        
Ví dụ mẫu sử dụng Card
        
Nội dung văn bản trong .card-body nà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à

    
    

        

            Header của Card 1
        
        

            
Tiêu đề Card 1
            
Ví dụ mẫu sử dụng Card
            
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
        
    
    
    
    

        

            Header của Card 2
        
        

            
Tiêu đề Card 2
            
Ví dụ mẫu sử dụng Card
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
            Nút bấm
        
    
    
    
    

        

            Header của Card 3
        
        

            
Tiêu đề Card 3
            
Ví dụ mẫu sử dụng Card 3
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
        
    
    

4 và thiết lập nó có một id ví dụ

    
    

        

            Header của Card 1
        
        

            
Tiêu đề Card 1
            
Ví dụ mẫu sử dụng Card
            
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
        
    
    
    
    

        

            Header của Card 2
        
        

            
Tiêu đề Card 2
            
Ví dụ mẫu sử dụng Card
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
            Nút bấm
        
    
    
    
    

        

            Header của Card 3
        
        

            
Tiêu đề Card 3
            
Ví dụ mẫu sử dụng Card 3
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
        
    
    

5 sau đó phần

    
    

        

            Header của Card 1
        
        

            
Tiêu đề Card 1
            
Ví dụ mẫu sử dụng Card
            
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
        
    
    
    
    

        

            Header của Card 2
        
        

            
Tiêu đề Card 2
            
Ví dụ mẫu sử dụng Card
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
            Nút bấm
        
    
    
    
    

        

            Header của Card 3
        
        

            
Tiêu đề Card 3
            
Ví dụ mẫu sử dụng Card 3
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
        
    
    

1 của mỗi Card liên hệ tới

    

        Header của Card
    
    

        
Tiêu đề Card
        
Ví dụ mẫu sử dụng Card
        
Nội dung văn bản trong .card-body này sử dụng .card-text.
        Nút bấm
    

7 này bằng thuộc tính

    
    

        

            Header của Card 1
        
        

            
Tiêu đề Card 1
            
Ví dụ mẫu sử dụng Card
            
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
        
    
    
    
    

        

            Header của Card 2
        
        

            
Tiêu đề Card 2
            
Ví dụ mẫu sử dụng Card
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
            Nút bấm
        
    
    
    
    

        

            Header của Card 3
        
        

            
Tiêu đề Card 3
            
Ví dụ mẫu sử dụng Card 3
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
        
    
    

8

Hã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 1
        
        

            
Tiêu đề Card 1
            
Ví dụ mẫu sử dụng Card
            
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
        
    
    
    
    

        

            Header của Card 2
        
        

            
Tiêu đề Card 2
            
Ví dụ mẫu sử dụng Card
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
            Nút bấm
        
    
    
    
    

        

            Header của Card 3
        
        

            
Tiêu đề Card 3
            
Ví dụ mẫu sử dụng Card 3
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
        
    
    

4 với id là

    
    

        

            Header của Card 1
        
        

            
Tiêu đề Card 1
            
Ví dụ mẫu sử dụng Card
            
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
        
    
    
    
    

        

            Header của Card 2
        
        

            
Tiêu đề Card 2
            
Ví dụ mẫu sử dụng Card
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
            Nút bấm
        
    
    
    
    

        

            Header của Card 3
        
        

            
Tiêu đề Card 3
            
Ví dụ mẫu sử dụng Card 3
            
Nội dung văn bản trong .card-body nà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 accordion

Tiêu đề Card 1

Ví dụ mẫu sử dụng Card

Nội dung văn bản trong

    
    

        

            Header của Card 1
        
        

            
Tiêu đề Card 1
            
Ví dụ mẫu sử dụng Card
            
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
        
    
    
    
    

        

            Header của Card 2
        
        

            
Tiêu đề Card 2
            
Ví dụ mẫu sử dụng Card
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
            Nút bấm
        
    
    
    
    

        

            Header của Card 3
        
        

            
Tiêu đề Card 3
            
Ví dụ mẫu sử dụng Card 3
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
        
    
    

0 này sử dụng

    
    

        

            Header của Card 1
        
        

            
Tiêu đề Card 1
            
Ví dụ mẫu sử dụng Card
            
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
        
    
    
    
    

        

            Header của Card 2
        
        

            
Tiêu đề Card 2
            
Ví dụ mẫu sử dụng Card
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
            Nút bấm
        
    
    
    
    

        

            Header của Card 3
        
        

            
Tiêu đề Card 3
            
Ví dụ mẫu sử dụng Card 3
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
        
    
    

3.

Nút bấm

Ví dụ mẫu sử dụng Card

Nội dung văn bản trong

    
    

        

            Header của Card 1
        
        

            
Tiêu đề Card 1
            
Ví dụ mẫu sử dụng Card
            
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
        
    
    
    
    

        

            Header của Card 2
        
        

            
Tiêu đề Card 2
            
Ví dụ mẫu sử dụng Card
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
            Nút bấm
        
    
    
    
    

        

            Header của Card 3
        
        

            
Tiêu đề Card 3
            
Ví dụ mẫu sử dụng Card 3
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
        
    
    

0 này sử dụng

    
    

        

            Header của Card 1
        
        

            
Tiêu đề Card 1
            
Ví dụ mẫu sử dụng Card
            
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
        
    
    
    
    

        

            Header của Card 2
        
        

            
Tiêu đề Card 2
            
Ví dụ mẫu sử dụng Card
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
            Nút bấm
        
    
    
    
    

        

            Header của Card 3
        
        

            
Tiêu đề Card 3
            
Ví dụ mẫu sử dụng Card 3
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
        
    
    

3.

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à

    
    

        

            Header của Card 1
        
        

            
Tiêu đề Card 1
            
Ví dụ mẫu sử dụng Card
            
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
        
    
    
    
    

        

            Header của Card 2
        
        

            
Tiêu đề Card 2
            
Ví dụ mẫu sử dụng Card
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
            Nút bấm
        
    
    
    
    

        

            Header của Card 3
        
        

            
Tiêu đề Card 3
            
Ví dụ mẫu sử dụng Card 3
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
        
    
    

4 và thiết lập nó có một id ví dụ

    
    

        

            Header của Card 1
        
        

            
Tiêu đề Card 1
            
Ví dụ mẫu sử dụng Card
            
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
        
    
    
    
    

        

            Header của Card 2
        
        

            
Tiêu đề Card 2
            
Ví dụ mẫu sử dụng Card
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
            Nút bấm
        
    
    
    
    

        

            Header của Card 3
        
        

            
Tiêu đề Card 3
            
Ví dụ mẫu sử dụng Card 3
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
        
    
    

5 sau đó phần

    
    

        

            Header của Card 1
        
        

            
Tiêu đề Card 1
            
Ví dụ mẫu sử dụng Card
            
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
        
    
    
    
    

        

            Header của Card 2
        
        

            
Tiêu đề Card 2
            
Ví dụ mẫu sử dụng Card
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
            Nút bấm
        
    
    
    
    

        

            Header của Card 3
        
        

            
Tiêu đề Card 3
            
Ví dụ mẫu sử dụng Card 3
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
        
    
    

1 của mỗi Card liên hệ tới

    

        Header của Card
    
    

        
Tiêu đề Card
        
Ví dụ mẫu sử dụng Card
        
Nội dung văn bản trong .card-body này sử dụng .card-text.
        Nút bấm
    

7 này bằng thuộc tính

    
    

        

            Header của Card 1
        
        

            
Tiêu đề Card 1
            
Ví dụ mẫu sử dụng Card
            
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
        
    
    
    
    

        

            Header của Card 2
        
        

            
Tiêu đề Card 2
            
Ví dụ mẫu sử dụng Card
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
            Nút bấm
        
    
    
    
    

        

            Header của Card 3
        
        

            
Tiêu đề Card 3
            
Ví dụ mẫu sử dụng Card 3
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
        
    
    

8

Hã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 1
        
        

            
Tiêu đề Card 1
            
Ví dụ mẫu sử dụng Card
            
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
        
    
    
    
    

        

            Header của Card 2
        
        

            
Tiêu đề Card 2
            
Ví dụ mẫu sử dụng Card
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
            Nút bấm
        
    
    
    
    

        

            Header của Card 3
        
        

            
Tiêu đề Card 3
            
Ví dụ mẫu sử dụng Card 3
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
        
    
    

4 với id là

    
    

        

            Header của Card 1
        
        

            
Tiêu đề Card 1
            
Ví dụ mẫu sử dụng Card
            
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
        
    
    
    
    

        

            Header của Card 2
        
        

            
Tiêu đề Card 2
            
Ví dụ mẫu sử dụng Card
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
            Nút bấm
        
    
    
    
    

        

            Header của Card 3
        
        

            
Tiêu đề Card 3
            
Ví dụ mẫu sử dụng Card 3
            
Nội dung văn bản trong .card-body nà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 accordion

Nội dung văn bản trong

    
    

        

            Header của Card 1
        
        

            
Tiêu đề Card 1
            
Ví dụ mẫu sử dụng Card
            
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
        
    
    
    
    

        

            Header của Card 2
        
        

            
Tiêu đề Card 2
            
Ví dụ mẫu sử dụng Card
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
            Nút bấm
        
    
    
    
    

        

            Header của Card 3
        
        

            
Tiêu đề Card 3
            
Ví dụ mẫu sử dụng Card 3
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
        
    
    

0 này sử dụng

    
    

        

            Header của Card 1
        
        

            
Tiêu đề Card 1
            
Ví dụ mẫu sử dụng Card
            
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
        
    
    
    
    

        

            Header của Card 2
        
        

            
Tiêu đề Card 2
            
Ví dụ mẫu sử dụng Card
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
            Nút bấm
        
    
    
    
    

        

            Header của Card 3
        
        

            
Tiêu đề Card 3
            
Ví dụ mẫu sử dụng Card 3
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
        
    
    

3.

    
    

        

            Header của Card 1
        
        

            
Tiêu đề Card 1
            
Ví dụ mẫu sử dụng Card
            
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
        
    
    
    
    

        

            Header của Card 2
        
        

            
Tiêu đề Card 2
            
Ví dụ mẫu sử dụng Card
            
Nội dung văn bản trong .card-body này sử dụng .card-text.
            Nút bấm
        
    
    
    
    

        

            Header của Card 3
        
        

            
Tiêu đề Card 3
            
Ví dụ mẫu sử dụng Card 3
            
Nội dung văn bản trong .card-body này sử dụng .card-text.