Hướng dẫn collapse bootstrap là gì

Đây là hiệu ứng khi click chuột vào button sẽ có khung chứa nội dung trượt xuống và hiển thị nội dung cho người xem. Thường dùng để giấu thông tin bắt người dùng click vào để xem được thông tin đó, hoặc dùng làm cho trang web được gọn lại thay vì hiển thị toàn bộ. Collapse được hỗ trợ sẵn trong thư viện Bootstrap

Để sử dụng Collapse trong Bootstrap bao gồm 2 thành phần

• • 1. Là Button để click vào và hiển thị nội dung
  • 2. Nội dung đã ẩn đi chỉ hiển thị khi click vào button trên

Code Collapse Bootstrap ví dụ

Click để xem chi tiết

Đây là chi tiết hiển thị sau khi click vào button trên

Nhìn vào code ví dụ trên các bạn để ý 2 thuộc tính sau:

• data-target=”#demo”
• id=”demo”

Đây là 2 thuộc tính ID để cho ta biết khi click vào button nào thì nội dung nào được hiển thị thông qua id cụ thể ở đây là “demo”

Code Collapse Bootstrap đầy đủ

	
		
		
		
		
	
	
		

			Click để xem chi tiết
			

			Đây là chi tiết hiển thị sau khi click vào button trên
			
		
	

Rất đơn giản phải không.

Việc sử dụng bootstrap collapse sẽ giúp bạn ẩn hay bật nội dung Html bằng js hay các lớp css của bootstrap. Vậy cách sử dụng collapse và accordion trong bootstrap 3 như thế nào? Mời các bạn cùng tham khảo bài viết dưới đây.

Bootstrap Collapse là gì?

Bootstrap collapse là một chức năng giúp bạn ẩn hay hiện một “Vùng” nào đó ở trên trang, khi đó người dùng có thể chủ động mở rộng thông tin, “vùng” đó để xem thêm nội dung, cũng như là ấn vào đó để ẩn đi nội dung đó, giúp tiết kiệm không gian website.

Code html ví dụ:

What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s …

Why do we use it?

It is a long established fact that a reader will be distracted by the
readable content of a page when looking at its layout…

Hình ảnh kết quả:

Hiện nay Collapse bao gồm 2 thành phần chính là button (link) và mục tiêu (target), và khi mà người dùng ấn vào button đó thì mục tiêu sẽ bị ẩn đi hoặc hiển thị lên.

Bootstrap đang sử dụng jQuery để xử lý các hoạt động này.

Mới đầu thì lớp .collapse chỉ được áp dụng cho mục tiêu (target), khi đó mục tiêu đang bị ẩn.

Và khi mà người dùng click vào button, lớp .collapse sẽ được áp dụng cho mục tiêu, bạn sẽ thấy mục tiêu, nội dung đang được mở rộng ra.

Cuối cùng thì khi mà nội dung đã được mở ra hoàn toàn, thì mục tiêu sẽ được thiết lập lớp .collapse.show

>> Xem thêm: Cách sử dụng Breadcrumbs & Images trong bootstrap 3

Multi targets (nhiều mục tiêu)

Với multi targets thì bạn có thể chỉ định được nhiều mục tiêu(target) cho một button(hay link) bằng cách sử dụng jQuery Selector, khi đó người dùng chỉ cần click vào button thì nhiều mục tiêu sẽ bị ẩn đi hay hiển thị lên.

Code html ví dụ:

Show/Hide Target 1


Show/Hide Target 2


Toggle both Targets

Lorem Ipsum is simply dummy text of the printing and typesetting industry…

Anim pariatur cliche reprehenderit,
enim eiusmod high life accusamus terry richardson ad squid….

Kết quả hình ảnh:

Accordion

Accordion chính là một thành phần của giao diện, accordion được tạo thành từ nhiều .card xếp chống lên nhau theo chiều hướng thẳng đứng.

Mỗi .card có thể được mở rộng (expland) hay thu nhỏ (collapse) tuỳ thuộc vào việc bạn cấu hình nó như thế nào.

Hi vọng với những chia sẻ ở trên về bootstrap collapse sẽ giúp bạn biết cách sử dụng tính năng ẩn hay hiện nội dung nhờ vào collapse nhé. Nếu như bạn còn bất kỳ thắc mắc gì có thể để lại comment ở dưới hoặc bạn cũng có thể tham khảo thêm các thông tin khác tại blog getbootstrap nhé. Chúc các bạn thành công.