<details>: Phần tử tiết lộ chi tiết

Try it

<details>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>

details {
  border: 1px solid #aaaaaa;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
}

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #aaaaaa;
  margin-bottom: 0.5em;
}

Tiện ích <details> có thể ở một trong hai trạng thái. Trạng thái đóng mặc định chỉ hiển thị tam giác và nhãn bên trong <summary> (hoặc chuỗi mặc định do user agent xác định nếu không có <summary>).

Khi người dùng nhấp vào tiện ích hoặc lấy tiêu điểm rồi nhấn thanh dấu cách, tiện ích sẽ "vặn" ra, hiển thị nội dung của nó. Tam giác thường xoay để biểu thị việc mở hoặc đóng tiện ích, đó là lý do tại sao chúng đôi khi được gọi là "twisty".

Bạn có thể dùng CSS để tạo kiểu cho tiện ích tiết lộ và có thể lập trình để mở/đóng tiện ích bằng cách thêm/xóa thuộc tính open. Tuy nhiên hiện tại không có cách tích hợp sẵn để tạo hiệu ứng chuyển đổi giữa trạng thái mở và đóng.

Mặc định khi đóng, tiện ích chỉ đủ cao để hiển thị tam giác tiết lộ và tóm tắt. Khi mở, nó mở rộng để hiển thị nội dung chi tiết bên trong.

Các triển khai tuân thủ đầy đủ tiêu chuẩn tự động áp dụng CSS display: list-item cho phần tử <summary>. Bạn có thể dùng điều này hoặc phần tử giả ::marker để tùy chỉnh tiện ích tiết lộ.

Thuộc tính

Phần tử này bao gồm các thuộc tính toàn cục.

open

Thuộc tính Boolean này cho biết liệu chi tiết — tức là nội dung của phần tử <details> — có đang hiển thị hay không. Chi tiết được hiển thị khi thuộc tính này tồn tại, hoặc bị ẩn khi thuộc tính này vắng mặt. Mặc định thuộc tính này vắng mặt, nghĩa là chi tiết không được hiển thị.

Note: Bạn phải xóa hoàn toàn thuộc tính này để ẩn chi tiết. open="false" làm cho chi tiết hiển thị vì thuộc tính này là Boolean.

name

Thuộc tính này cho phép kết nối nhiều phần tử <details> với nhau, chỉ có một phần tử được mở tại một thời điểm. Điều này giúp các nhà phát triển dễ dàng tạo các tính năng giao diện như accordion mà không cần scripting.

Thuộc tính name chỉ định tên nhóm — đặt cho nhiều phần tử <details> cùng giá trị name để nhóm chúng lại. Chỉ một trong các phần tử <details> được nhóm có thể mở tại một thời điểm — mở một phần tử sẽ khiến phần tử khác đóng lại. Nếu nhiều phần tử <details> được nhóm có thuộc tính open, chỉ phần tử đầu tiên theo thứ tự nguồn sẽ được hiển thị mở.

Note: Các phần tử <details> không cần phải liền kề nhau trong nguồn để thuộc cùng một nhóm.

Sự kiện

Ngoài các sự kiện thông thường được hỗ trợ bởi các phần tử HTML, phần tử <details> hỗ trợ sự kiện toggle, được phát đến phần tử <details> bất cứ khi nào trạng thái của nó thay đổi giữa mở và đóng. Nó được gửi sau khi trạng thái thay đổi, mặc dù nếu trạng thái thay đổi nhiều lần trước khi trình duyệt có thể phát sự kiện, các sự kiện được hợp nhất để chỉ gửi một sự kiện.

Bạn có thể dùng trình lắng nghe sự kiện cho sự kiện toggle để phát hiện khi tiện ích thay đổi trạng thái:

details.addEventListener("toggle", (event) => {
  if (details.open) {
    /* phần tử đã được chuyển sang trạng thái mở */
  } else {
    /* phần tử đã được chuyển sang trạng thái đóng */
  }
});

Ví dụ

Ví dụ tiết lộ cơ bản

Ví dụ này hiển thị một phần tử <details> cơ bản với <summary>.

<details>
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>

Kết quả

Tạo hộp tiết lộ ở trạng thái mở

Để khởi động hộp <details> ở trạng thái mở, thêm thuộc tính Boolean open:

<details open>
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>

Kết quả

Nhiều hộp tiết lộ có tên

Chúng ta bao gồm nhiều hộp <details>, tất cả có cùng tên để chỉ có thể mở một hộp tại một thời điểm:

<details name="requirements">
  <summary>Graduation Requirements</summary>
  <p>
    Requires 40 credits, including a passing grade in health, geography,
    history, economics, and wood shop.
  </p>
</details>
<details name="requirements">
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>
<details name="requirements">
  <summary>Job Requirements</summary>
  <p>
    Requires knowledge of HTML, CSS, JavaScript, accessibility, web performance,
    privacy, security, and internationalization, as well as a dislike of
    broccoli.
  </p>
</details>

Kết quả

Hãy thử mở tất cả các tiện ích tiết lộ. Khi bạn mở một tiện ích, tất cả các tiện ích còn lại sẽ tự động đóng.

Tùy chỉnh giao diện

Bây giờ hãy áp dụng một số CSS để tùy chỉnh giao diện của hộp tiết lộ.

CSS

details {
  font:
    16px "Open Sans",
    "Calibri",
    sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #dddddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #dddddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

details:open > summary {
  background-color: #ccccff;
}

CSS này tạo ra giao diện tương tự như giao diện tab, khi nhấp vào tab sẽ mở ra để hiển thị nội dung.

HTML

<details>
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>

Kết quả

Xem trang <summary> để có ví dụ về tùy chỉnh tiện ích tiết lộ.

Tóm tắt kỹ thuật

Đặc tả

Tương thích trình duyệt

Xem thêm

• <summary>
• ::details-content