Tự học Bootstrap - Cơ bản - bài 19 – Menu Collapse

Collapsible cơ bản là gì?

Collapsibles hữu ích khi bạn muốn ẩn/hiện 01 lượng lớn nội dung.

Ví dụ:

<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lớp học vi tính.COM....</div>

Giải thích ví dụ:

Lớp .collapse chỉ ra 01 phần tử collapsible (01 thẻ <div> trong ví dụ); đây là nội dung sẽ bị ẩn đi hay hiện ra khi bấm vào nút.

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

Ghi chú: Đối với thẻ <a>, bạn có thể dùng thuộc tính href thay vì data-target

Ví dụ:

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

<div id="demo" class="collapse">
Lớp học vi tính.COM....
</div>

Mặc định , phần nội dung collapsible bị ẩn đi. Tuy vậy, bạn có thể thêm lớp .in để hiện nội dung 01 cách mặc định.

Ví dụ:

<div id="demo" class="collapse in">
Lớp học vi tính.COM....
</div>

---

Thanh panel collapsible

Ví dụ:

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">Panel Body</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>
</div>

---

Nhóm danh sách collapsible

Ví dụ:

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <ul class="list-group">
        <li class="list-group-item">One</li>
        <li class="list-group-item">Two</li>
        <li class="list-group-item">Three</li>
      </ul>
      <div class="panel-footer">Footer</div>
    </div>
  </div>
</div>

---

Menu Accordion

Ví dụ sau hiển thị 01 menu accordion cơ bản.

Ghi chú: Sử dụng thuộc tính data-parent để đảm bảo rằng tất cả phần tử collapsible thuộc 01 phần tử cha sẽ đóng lại khi 01 trong các phần tử khác mở ra.

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        Collapsible Group 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-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="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-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="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
        Collapsible Group 3</a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-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>

Lophocvitinh.COM***Tự học Bootstrap - Phần cơ... bởi minh-nguyen48