Cách dùng Collapse để ẩn hiện nội dung trong Bootstrap 4

Collapse thường được sử dụng để trình bày 1 nội dung có thể thu phóng tùy ý. Đây cũng là nội dung của bài học ngày hôm nay của chúng ta: Collapse trong Bootstrap 4 !

Collapse cơ bản:

Collapsibles hữu ích khi bạn muốn ẩn và hiển thị một lượng lớn nội dung:

Ví dụ

<div class="container">
  <h2>Ví dụ Collapsible đơn giản</h2>
  <p>Nhấp vào nút để chuyển đổi giữa hiển thị và ẩn nội dung.</p>
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Ẩn/Hiện</button>
  <div id="demo" class="collapse">   
      <p> Sóng gợn tràng giang buồn điệp điệp,
      Con thuyền xuôi mái nước song song.
      Thuyền về nước lại, sầu trăm ngả;
      Củi một cành khô lạc mấy dòng. </p>

      <p> Lơ thơ cồn nhỏ gió đìu hiu,
      Đâu tiếng làng xa vãn chợ chiều.
      Nắng xuống, trời lên sâu chót vót;
      Sông dài, trời rộng, bến cô liêu.</p>

     <p> Bèo giạt về đâu, hàng nối hàng;
      Mênh mông không một chuyến đò ngang.
      Không cầu gợi chút niềm thân mật,
      Lặng lẽ bờ xanh tiếp bãi vàng.</p>

     <p> Lớp lớp mây cao đùn núi bạc,
      Chim nghiêng cánh nhỏ: bóng chiều sa.
      Lòng quê dợn dợn vời con nước,
      Không khói hoàng hôn cũng nhớ nhà.</p>
</div>

Giải thích ví dụ:

Lớp .collapse chỉ ra một phần tử có thể thu gọn (trong ví dụ trên là phần tử <div>) đây là nội dung sẽ được hiển thị hoặc ẩn bằng một cú nhấp chuột.

Để kiểm soát (hiển thị / ẩn) nội dung có thể thu gọn, hãy thêm thuộc tính data-toggle = "collapse" vào phần tử <a> hoặc <button>. Sau đó, thêm thuộc tính data-target = "# id" để kết nối nút với nội dung có thể thu gọn (<div id = "demo">).

Lưu ý: Đối với các phần tử <a>, bạn có thể sử dụng thuộc tính href thay vì thuộc tính data-target:

Theo mặc định, nội dung thu gọn được ẩn. Tuy nhiên, bạn có thể thêm lớp .show để hiển thị nội dung theo mặc định:

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

Collapse  kiểu Accordion

Ví dụ sau đây cho thấy một Accordion đơn giản bằng cách mở rộng thành phần thẻ.

Lưu ý: Sử dụng thuộc tính data-parent để đảm bảo rằng tất cả các phần tử có thể thu gọn trong phần tử gốc được chỉ định sẽ bị đóng khi một trong các mục có thể thu gọn được hiển thị.

<div id="accordion">
  <div class="card">
    <div class="card-header">
      <a class="card-link" data-toggle="collapse" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="collapse show" data-parent="#accordion">
      <div class="card-body">
        Lorem ipsum..
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="collapse" data-parent="#accordion">
      <div class="card-body">
        Lorem ipsum..
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
        Collapsible Group Item #3
      </a>
    </div>
    <div id="collapseThree" class="collapse" data-parent="#accordion">
      <div class="card-body">
        Lorem ipsum..
      </div>
    </div>
  </div>
</div>

Lời kết:

Việc thu phóng trong nội dung bằng collapse trong Bootstrap 4 rất đơn giản phải không nào. Hẹn gặp các bạn trong bài học tiếp theo!