Bootstrap 4 - Bootstrap Collapse

 Bootstrap Collapse

Bootstrap Collapse là một thành phần hữu ích nó giúp ẩn hoặc hiện một "vùng" (area) trên trang, người dùng có thể chủ động mở rộng (expand) một "vùng" để xem nội dung tại đó, hoặc ẩn nó để tiết kiệm không gian.

Ví dụ:

<div class="container">
  <h2>Simple Collapsible</h2>
  <a href="#demo" class="btn btn-primary" data-toggle="collapse">Simple collapsible</a>
  <div id="demo" class="collapse">
    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>

Xem ví dụ

Lớp .collapse để mô tả 1 phần tử có thể đóng/mở nội dung (với 1 thẻ div như ví dụ trên); và đây là nội dung sẽ được hiển thị hay bị giấu đi khi nhấn nút. Việc điều khiển đóng/mở được thực hiện thông qua 1 nút với thuộc tính data-toggle=”collapse” và thuộc tính data-target=”#id” để kết nối nút với nội dung cần đóng/mở (như ví dụ là id=”demo”).

Mặc định thì nội dung luôn bị che đi, nếu bạn muốn hiển thị nội dung ngay từ đầu thì đơn giản là thêm lớp .in trong class=”collapse in”.


Thanh Panel đóng/mở

Tương tự, chúng ta cũng có thể tạo 1 thanh panel và có thể hiển thị hoặc che đi nội dung của thanh Panel này. Lớp .panel-collapse và .collapse cho phép chúng ta thực hiện được điều này.

Ví dụ:

<div class="container">
    <div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" href="#collapse1">Thanh Panel đóng/mở</a>
                </h4>
            </div>
            <div id="collapse1" class="panel-collapse collapse">
                <div class="panel-body">Nội dung Panel</div>
                <div class="panel-footer">Phần Footer của Panel</div>
            </div>
        </div>
    </div>
</div>

Xem ví dụ


Nhóm danh sách đóng/mở

Chúng ta cũng sử dụng 2 lớp .panel-collapse và .collapse để thực hiện việc đóng/mở với nhóm danh sách.

<div class="container">
<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Nhóm danh sách đóng/mở - dammio.com</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <ul class="list-group">
        <li class="list-group-item">Phần tử 1</li>
        <li class="list-group-item">Phần tử 2</li>
        <li class="list-group-item">Phần tử 3</li>
      </ul>
      <div class="panel-footer">Phần Footer</div>
    </div>
  </div>
</div>
</div>

Xem ví dụ

 


Dạng đóng/mở Accordion

Cuối cùng, bạn có thể tạo 1 đóng/mở theo dạng Accordion, tức là chia thành nhiều Panel, khi nhấn vào mỗi Panel thì sẽ hiện nội dung của Panel đó. Lưu ý, chúng ta phải dùng thuộc tính data-parent để chắc chắn tất cả phần tử đóng/mở khác đều đóng khi có 1 phần tử đóng/mở nào đó đang hiển thị.

<div class="container">
  <h2>Accordion Example</h2>
  <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
  <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 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 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 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 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 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>
    

Xem ví dụ