Trang chủ Chưa được phân loại

Chưa được phân loại

Cơ bản khi thu gọn(Basic Collapsible)

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ụ:

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

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

Giải thích ví dụ:Lớp collapse chỉ ra một phần tử có thể thu gọn.Để 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  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.

-Ví dụ:

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

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

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.

-Ví dụ:

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

Accordion

-Lưu ý: Sử dụng thuộc tính data-cha để đả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ị.

-Ví dụ:

<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>

Tham khảo tài liệu Bootstrap 4 Js