Blog

Ẩn nội dung HTML bằng Thu gọn trong Bootstrap

hktc.info xin giới thiệu bài viết

  • .collapse.show .Các phần tử hiển thị lớp
  • 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 thành, nó đặt phần tử thành lớp .collapse và ẩn phần tử
  • Vì vậy, khi xây dựng một box hiển thị nội dung, nếu bạn muốn box đó mặc định ẩn đi thì sử dụng lớp .collapse, còn nếu muốn hiển thị mặc định thì sử dụng .collapse .show

    Click 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ẽ hiển thị/ẩn các 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 thường ; 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 nhấp vào liên kết hoặc nút. Vì hộp mặc định bị ẩn nên các liên kết và nút có thuộc tính aria-expanded=”false”

    Ẩn/hiện từng mục trong bộ sưu tập bằng giao diện đàn accordion

    Đầu tiên tạo một thẻ bên trong thẻ này (đọc cách sử dụng nó) áp dụng kỹ thuật gấp ở trên – ẩn mặc định là .card-body và trình kích hoạt thu gọn là .card-header

    Code mẫu này cũng giống như trên, khi click vào tiêu đề thì nhãn sẽ ẩn nội dung

    Bây giờ, bạn tạo nhiều nhãn 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 nhãn hiển thị thì các nhãn khác ẩn nội dung. Để làm điều này, chỉ cần nhóm tất cả các thẻ vào một phần tử .accordion và đặt nó thành một id, ví dụ: myaccordion, sau đó đặt .card-header của mỗi thẻ với data-parent=attribute “#myaccordion” và id được liên kết

    Xem kỹ cấu trúc ví dụ bên dưới, phần tử .accordion với id myaccordion chứa 3 thẻ. Lưu ý rằng tab đầ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 ra đàn accordion

    Cảm ơn bạn đã xem qua bài viết của hktc.info

    Rate this post

    Trả lời

    Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *