Chào mừng bạn đến với CodeTutHub, nơi cung cấp những hướng dẫn chi tiết về Bootstrap 5. Trong bài viết này, chúng ta sẽ tìm hiểu về Collapse - một thành phần hữu ích để hiển thị hoặc ẩn nội dung một cách gọn gàng và chuyên nghiệp.

Collapse là gì?

Collapse trong Bootstrap 5 là một thành phần UI giúp bạn ẩn và hiển thị nội dung khi cần thiết. Thành phần này rất hữu ích để giảm độ dài trang, làm gọn giao diện, hoặc tạo các phần nội dung có thể mở rộng, chẳng hạn như FAQ (Câu hỏi thường gặp), menu, hoặc bảng điều khiển.

Cách sử dụng Collapse trong Bootstrap 5

Cấu trúc

Dưới đây là cấu trúc cơ bản của Collapse:

html
Thử online
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#exampleCollapse" aria-expanded="false" aria-controls="exampleCollapse">
  Mở/Đóng Nội Dung
</button>
<div class="collapse" id="exampleCollapse">
  <div class="card card-body">
    Đây là nội dung được ẩn/hiện bằng Collapse.
  </div>
</div>

Giải thích:

  1. Nút điều khiển (data-bs-toggle="collapse"):
    • Nút này dùng để bật/tắt Collapse.
    • data-bs-target: Trỏ tới ID của nội dung Collapse (ví dụ: #exampleCollapse).
    • aria-expanded: Chỉ trạng thái của Collapse (mở hoặc đóng).
    • aria-controls: Xác định nội dung mà nút điều khiển.
  2. Phần nội dung (.collapse):
    • Nội dung được ẩn/hiện.
    • ID của phần này phải khớp với data-bs-target của button.

Tích hợp nhiều Collapse

Bạn có thể tạo nhiều Collapse độc lập trên cùng một trang:

html
Thử online
<button class="btn btn-success" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
  Collapse 1
</button>
<div class="collapse" id="collapseOne">
  <div class="card card-body">
    Nội dung Collapse 1.
  </div>
</div>

<button class="btn btn-info" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
  Collapse 2
</button>
<div class="collapse" id="collapseTwo">
  <div class="card card-body">
    Nội dung Collapse 2.
  </div>
</div>

Collapse với nhóm (Accordion)

Nếu bạn muốn chỉ một Collapse được mở tại một thời điểm, bạn có thể sử dụng Accordion. Accordion sử dụng thuộc tính data-bs-parent để đảm bảo các Collapse khác được đóng khi một Collapse mở.

Ví dụ:

html
Thử online
<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item 1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Đây là nội dung của Accordion Item 1.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item 2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Đây là nội dung của Accordion Item 2.
      </div>
    </div>
  </div>
</div>

Kết quả:

  • Khi Accordion Item 1 được mở, Accordion Item 2 sẽ tự động đóng lại và ngược lại.

Sử dụng Collapse với JavaScript

Bạn có thể điều khiển Collapse bằng JavaScript nếu cần tùy chỉnh hành vi.

Ví dụ:

html
Thử online
<button id="toggleButton" class="btn btn-danger">Toggle Collapse</button>
<div class="collapse" id="jsCollapseExample">
  <div class="card card-body">
    Đây là nội dung được điều khiển bằng JavaScript.
  </div>
</div>

<script>
  var collapseElement = document.getElementById('jsCollapseExample');
  var toggleButton = document.getElementById('toggleButton');
  var collapseInstance = new bootstrap.Collapse(collapseElement);

  toggleButton.addEventListener('click', function () {
    collapseInstance.toggle();
  });
</script>

Hiệu ứng và tùy chỉnh

1. Hiệu ứng mượt mà

Bootstrap tự động thêm hiệu ứng trượt khi bạn mở/đóng Collapse. Bạn không cần phải thêm CSS hoặc JavaScript riêng cho hiệu ứng này.

2. Tùy chỉnh màu sắc và giao diện

Bạn có thể sử dụng các lớp Bootstrap (như .card, .bg-*, .text-*) để tùy chỉnh giao diện của Collapse.

html
<div class="collapse" id="customCollapse">
  <div class="card bg-primary text-white">
    Nội dung với nền màu xanh và chữ trắng.
  </div>
</div>

Một số mẹo sử dụng Collapse hiệu quả

  1. Chỉ hiển thị nội dung quan trọng: Sử dụng Collapse để ẩn các phần thông tin ít quan trọng hoặc không cần hiển thị ngay lập tức.
  2. Tối ưu hóa trải nghiệm người dùng: Khi sử dụng nhiều Collapse trên một trang, hãy cân nhắc sử dụng Accordion để giữ giao diện gọn gàng.
  3. Thêm chỉ báo trạng thái: Bạn có thể thêm các chỉ báo như "+", "-" để người dùng dễ dàng nhận biết trạng thái mở/đóng.

Kết luận

Collapse là một thành phần mạnh mẽ và linh hoạt trong Bootstrap 5, giúp bạn quản lý nội dung hiệu quả trên trang web. Với khả năng tích hợp dễ dàng và nhiều tùy chọn tùy chỉnh, bạn có thể áp dụng Collapse trong nhiều trường hợp khác nhau như FAQ, Accordion, hoặc menu ẩn.

Hãy tiếp tục theo dõi CodeTutHub để khám phá thêm các thành phần hữu ích khác trong series học Bootstrap 5. Nếu bạn có bất kỳ thắc mắc nào, đừng quên để lại bình luận nhé!

Chúc bạn học tốt!