FullStack Academy

Collapse trong Bootstrap 4

Xin chào các bạn, chúng ta sẽ tiếp tục đến với collapse trong bootstrap 4. Collapse sẽ hữu dụng trong các vấn đề chúng ta cần ẩn hiện một lượng lớn thông text ví dụ xem thêm mô tả sản phẩm, ẩn hiện câu trả lời trong phần FAQs, xem thêm đối với các đoạn text dài. Giờ thì chúng ta cùng nhau học và nghiên cứu cách sử dụng nhé.

Collapse cơ bản

Nếu bạn muốn xử lý những đoạn văn bản bình thường muốn ẩn nội dung, khi cần mở ra thì Collapse là sự lựa chọn chính xác.

Giờ chúng ta sẽ cùng nhau chuẩn bị 1 nút button để khi click vào thì sẽ hiển thị ra nội dung bị ẩn đi:



  • Class .collapse ở trong thẻ <div> nội dung hiển thị chỉ ra phần tử đó đóng mở, nội dung sẽ được hiển thị theo việc click chuột.
  • Thuộc tính data-toggle="collapse" giúp kiểm soát việc ẩn/hiện của nội dung, thuộc tính này hay được thêm vào thẻ <a> hoặc thẻ <button>.
  • Thuộc tính data-target="#demo" để kết nối nút với khối có nội dung thu gọn (<div id=”demo”>)
Lưu ý: Đối với thẻ <a>, các bạn có thể sử dụng thuộc tính href thay vì thuộc tính data-target, như sau:



Collapse nâng cao

Tiếp theo chúng ta sẽ đi xây dựng phần Collapse phức tạp hơn cho dạng list FAQs như sau:

 

 




Kết luận

Collapse có rất nhiều ứng dụng để ẩn hiện các khối text mà chúng ta mong muốn. Đặc biệt là trong các phần như Menu, FAQs, xem thêm,... Hẹn các bạn trong các bài học tiếp theo của học phần Bootstrap 4.