Học CNTT Bootstrap

Bài 19: Cách dùng Collapse trong Bootstrap 5

Mục lục

Collapse trong Bootstrap 5 giúp bạn ẩn, hiện nội dung trên trang bằng một số class và plugin JavaScript. Dưới đây là những điều bạn cần biết về Collapse trong Bootstrap 5.

Cách dùng Collapse cơ bản trong Bootstrap 5

Collapse hữu ích khi bạn muốn ẩn và hiện một số lượng nội dung lớn trên trang. Về cơ bản, code sẽ như sau:

<button data-bs-toggle="collapse" data-bs-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
Nội dung....
</div>

Ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Nút ẩn hiện nội dung đơn giản</h2>
  <p>Click vào nút bấm để ẩn và hiện nội dung.</p>
  <button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo">Quantrimang.com</button>
  <div id="demo" class="collapse">
    Kênh thông tin công nghệ nhanh nhất, các bài học lập trình online, tin tức game, cập nhật xu hướng giới trẻ....
  </div>
</div>

</body>
</html>

Nút ẩn hiện nội dung

Giải thích chi tiết:

Class .collapse cho biết nhân tố có thể thu gọn (<div>). Đây là nội dung sẽ được hiển thị hoặc ẩn bằng một click vào nút bấm.

Để điều khiển nội dung có thể thu gọn (hiện/ẩn), thêm thuộc tính data-bs-toggle="collapse" vào thanh phần <a> hoặc <button>. Sau đó, thêm data-bs-target="#id" để kết nối nút bấm đó với nội dung có thể thu gọn (<div id="demo">).

Lưu ý: Đối với nhân tố <a>, bạn có thể dùng thuộc tính href thay cho data-bs-target:

<a href="#demo" data-bs-toggle="collapse">Collapsible</a>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

Mặc định, nội dung có thể thu gọn sẽ bị ẩn. Tuy nhiên, bạn có thể thêm class .show để hiện nội dung theo mặc định:

<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>

Ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Mặc định hiện nội dung có thể thu gọn</h2>
  <p>Thêm class .show cạnh class collapse để mặc định hiện nội dung.</p>
  <p>Click vào nút bấm để chuyển đổi giữa việc hiện và ẩn nội dung.</p>
  <button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo">Thu gọn nội dung</button>
  <div id="demo" class="collapse show">
    QuanTriMang.com là kênh kiến thức công nghệ hàng đầu hiện nay. Cập nhật nhanh mọi bản tin game, đời sống, xã hội, xu hướng hót trên mạng và nhiều hơn thế nữa....
  </div>
</div>
    
</body>
</html>

Mặc định hiển thị nội dung có thể thu gọn

Accordion

Đây là một thiết kế thu gọn menu theo dạng xếp chồng lên nhau. Lưu ý, dùng thuộc tính data-bs-parent để đảm bảo tất cả các nhân tố có thể thu gọn trong phần tử cha cụ thể sẽ đóng khi hiển thị một trong số các mục có thể thu gọn.

Code cơ bản:

<div id="accordion">

<div class="card">
<div class="card-header">
<a class="btn" data-bs-toggle="collapse" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
<div class="card-body">
Lorem ipsum..
</div>
</div>
</div>

<div class="card">
<div class="card-header">
<a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
<div class="card-body">
Lorem ipsum..
</div>
</div>
</div>

<div class="card">
<div class="card-header">
<a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
Collapsible Group Item #3
</a>
</div>
<div id="collapseThree" class="collapse" data-bs-parent="#accordion">
<div class="card-body">
Lorem ipsum..
</div>
</div>
</div>

</div>

Ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Ví dụ về Accordion trong Bootstrap 5</h2>
  <p><strong>Lưu ý:Thuộc tính </strong>data-bs-parent</strong> đảm bảo tất cả nhân tố có thể thu gọn nằm trong mục cha sẽ được đóng khi một mục có thể thu gọn khác hiện ra.</p>
  <div id="accordion">
    <div class="card">
      <div class="card-header">
        <a class="btn" data-bs-toggle="collapse" href="#collapseOne">
          Mục QuanTriMang.com #1
        </a>
      </div>
      <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
         Mục QuanTriMang.com #2
      </a>
      </div>
      <div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
           Mục QuanTriMang.com #3
        </a>
      </div>
      <div id="collapseThree" class="collapse" data-bs-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
  </div>
</div>
    
</body>
</html>

Accordion trong Bootstrap 5

Trên đây là cách thu gọn và mở rộng menu trên web, ứng dụng bằng Collapse của Bootstrap 5. Thành phần này khá dễ dùng với hai kiểu cơ bản. Hãy ghi nhớ nó để đa dạng hóa trong thiết kế dự án của bạn nhé!

Thứ Bảy, 03/12/2022 11:47
5 ★ 3 👨 1.120
#Bootstrap

Bạn nên đọc

0 Bình luận
Sắp xếp theo
❖
Xóa Đăng nhập để Gửi

    Có thể bạn quan tâm

    ❖ Bootstrap
    Bootstrap 5