Bài 5: Collapse – Ẩn hiện nội dung trong Bootstrap

1

Trong bài này, mình sẽ hướng dẫn các bạn về thành phần collapse – ẩn hiện nội dung trong Bootstrap. Các bạn có thể tham khảo thêm những tính năng nâng cao trong trang tài liu ca Bootstrap, mình chỉ hướng dẫn nội dung cơ bản và dễ sử dụng nhất.

Video – Collapse – Ẩn hiện nội dung trong Bootstrap

Ý tưởng

Collapse chủ yếu để tạo hiệu ứng ẩn hiện nội dung. Ví dụ như:

Chúng ta có một button và 1 thẻ a. Nội dung đã bị ẩn. Để hiện nội dung, chúng ta click vào button hoặc thẻ a

 Collapse - Ẩn hiện nội dung trong Bootstrap

Nếu ấn 1 lần nữa vào button, nội dung sẽ ẩn đi. Các bạn có thể thấy dạng này trong trang web ví dụ bên dưới:

Adsense dùng collapse - Ẩn hiện nội dung trong Bootstrap
Trang web chính sách hành vi của AdSense cũng dùng collapse

Cấu trúc và cách thức hoạt động của collapse

Bạn phải chắc rằng đã thêm bootstrap.min.css và bootstrap.min.js vào file html nhé.

⭐️ Nội dung bị ẩn

+ Là một khối có class=”collapse”, và có 1 id đặt theo ý của các bạn. Nên đặt id liên quan đến nội dung bị ẩn đi, ví dụ: id-collapse-noidung. Trong code mẫu mình đặt là noi-dung-collapse.

+ Các bạn có thể dùng card đã học ở bài 4 để định dạng cho phần nội dung này.

<div class="collapse" id="noi-dung-collapse">
<div class="card card-body">
Distinctio praesent eros, quibusdam nibh? Euismod. Per magni, id dolore hymenaeos excepturi incidunt eius. Necessitatibus natus faucibus corporis, quam dolores ante minus risus perspiciatis, voluptatum turpis etiam vero excepturi luctus augue donec esse optio auctor pulvinar! Vulputate quas eiusmod
</div>

⭐️ Phần điều khiển

Các bạn có thể dùng 1 button hoặc thẻ a. Định dạng tùy theo ý bạn nhé. Điều quan trọng là phải có những thuộc tính sau:

+ data-toggle=”collapse”

+ data-target=”#id-collapse-noidung”. Trong ví dụ, mình dùng #noi-dung-collapse. Nh phi có du # .

<button class="btn btn-oultline-info" type="button" data-toggle="collapse" data-target="#noi-dung-collapse">Xem thêm</button>
<a href="" class="btn btn-secondary" role="button" data-toggle="collapse" data-target="#noi-dung-collapse">Link xem thêm</a>

Như vậy là chúng ta đã làm được phần collapse. Bootstrap 4 hỗ trợ rất tốt cho các hiệu ứng, khi mà phần js xử lý cũng đã được viết sẵn. Chỉ cần gọi đúng các thuộc tính là có thể dùng, không cần phải viết các đoạn mã js.

Ngoài ra, Collapse còn có những phần nâng cao như accordion (tập hợp nhiều collapse thành 1 list. Các bạn có thể tự tìm hiểu thêm nhé. Nhưng nhìn chung, nguyên lý sử dụng là gồm 2 phần đã trình bày như trên.

Code mẫu: Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Liên h

  1. […] Phần code accordion khá dài, bạn nên tham khảo trang Bootstrap docs phần Collapse nhé. Còn cách mà collpase hoạt động các bạn xem bài 5. […]

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.