Bootstrap 4 – Collapse

Bạn có thể thêm data-toggle=”collapse” vào thẻ a hay button để tạo Collapse. Giúp thu gọn hay mở rộng text khi click vào.

Dùng Link

Dùng thẻ a với href là ID của phần content để tạo collapse.

Phần content phải chưa ID này và thêm class .collapse.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <p>
      <a data-toggle="collapse" href="#footwear" aria-expanded="false" aria-controls="footwear">Footwear</a>
    </p>
    <div class="collapse" id="footwear">
      <p>Footwear refers to garments worn on the feet, which originally serves to purpose of protection against adversities
        of the environment, usually regarding ground textures and temperature.</p>
    </div>
  </div>

</body>

</html>

Dùng Button

Cũng tương tự như với link, dùng thuộc tính data-target với giá trị là id của content.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <button class="btn btn-info" type="button" data-toggle="collapse" data-target="#footwear" aria-expanded="false" aria-controls="footwear">
      Footwear
    </button>

    <div class="collapse" id="footwear">
      <p>Footwear refers to garments worn on the feet, which originally serves to purpose of protection against adversities
        of the environment, usually regarding ground textures and temperature.</p>
    </div>
  </div>

</body>

</html>

Accordion

Accordion thường được dùng nhiều trong trường hợp nội dung của FAQs, giới thiệu sản phẩm….

Bạn cũng có thể dùng Bootstrap cards (Học ở bài sau) để định dạng content của Accordion.

Khi load trang, bạn muốn mặt định mở nội dung collapse nào thì thêm class show vào và dùng aria-expanded=”true”.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div id="faq" role="tablist" aria-multiselectable="true">

      <div class="card">
        <div class="card-header" role="tab" id="questionOne">
          <h5 class="card-title">
            <a data-toggle="collapse" data-parent="#faq" href="#answerOne" aria-expanded="true" aria-controls="answerOne">
              What if my boots are too big for my feet?
            </a>
          </h5>
        </div>
        <div id="answerOne" class="collapse show" role="tabcard" aria-labelledby="questionOne">
          <div class="card-body">
            Stuff your boots with newspaper or tissue.
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-header" role="tab" id="questionTwo">
          <h5 class="card-title">
            <a class="collapsed" data-toggle="collapse" data-parent="#faq" href="#answerTwo" aria-expanded="false" aria-controls="answerTwo">
              Can I wear my boots inside?
            </a>
          </h5>
        </div>
        <div id="answerTwo" class="collapse" role="tabcard" aria-labelledby="questionTwo">
          <div class="card-body">
            No. Your mama should've told you about this.
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-header" role="tab" id="questionThree">
          <h5 class="card-title">
            <a class="collapsed" data-toggle="collapse" data-parent="#faq" href="#answerThree" aria-expanded="true" aria-controls="answerThree">
              What if my boots get slippery when wet?
            </a>
          </h5>
        </div>
        <div id="answerThree" class="collapse in" role="tabcard" aria-labelledby="questionThree">
          <div class="card-body">
            Keep your boots dry.
          </div>
        </div>
      </div>

    </div>
  </div>

</body>

</html>