Đâ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ụ
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Click để xem chi tiết</button>
<div id="demo" class="collapse">
Đây là chi tiết hiển thị sau khi click vào button trên
</div>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 đủ
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Click để xem chi tiết</button>
<div id="demo" class="collapse">
Đây là chi tiết hiển thị sau khi click vào button trên
</div>
</div>
</body>
</html>Rất đơn giản phải không.
