Basic Collapsible

Collapsibles rất hữu ích khi bạn muốn ẩn và hiển thị nội dung:

Ví dụ

Simple collapsible

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<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>

Giải thích ví dụ

Class .collapse chứa nội dung (thẻ <div> trong ví dụ trên); nội dung sẽ được hiển thị hoặc ẩn khi ấn button.

Để điều khiển (show/hide) nội dung, add thuộc tính data-toggle="collapse" vào thẻ <a> hoặc thẻ <button>. Sau đó add thuộc tính data-target="#id" để connect button với nội dung collapsible(<div id="demo">).

Chú ý: Với thẻ <a>, bạn có thể dùng href thay vì data-target:

Theo mặc định, nội dung là hidden. Tuy nhiên, bạn có thể add class .show để hiển thị nội dung theo mặc định:

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<div id="demo" class="collapse show">
    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>

Accordion

Collapsible Group Item #1

Lorem ipsum..

Collapsible Group Item #2

Lorem ipsum..

Collapsible Group Item #3

Lorem ipsum..

Lorem ipsum..

Ví dụ trên đây cho thấy một Accordion đơn giản.

Chú ý: Thuộc tính data-parent để khiến tất cả collapsible elements còn lại đóng khi có một element mở.

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>