Thuộc tính details trong CSS

Thẻ details sẽ xác định chi tiết bổ sung mà người dùng có thể ẩn hiện theo yêu cầu.

Thẻ details  có thể được dùng để tạo một widget tương tác mà người dùng có thể mở và đóng. Bất kỳ loại nội dung nào cũng có thể được đặt bên trong thẻ details.

Các nội dung trong cặp thẻ details sẽ không được hiển thị, trừ khi được đặt thuộc tính mở.

Cách sử dụng thẻ details

Ví dụ: sử dụng thẻ details để tạo widget tương tác.

Code RUN
<!DOCTYPE html>
<html>
    <head>
    	<title>Học lập trình miễn phí tại freetuts.net</title>
		<meta charset="utf-8">
	</head>
    <body>
    	<h1>Học lập trình miễn phí tại freetuts.net</h1>
		
		<details>
		  	<summary>Copyright 1999-2014.</summary>
		  	<p> - by Refsnes Data. All Rights Reserved.</p>
		  	<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
		</details>

		<p><b>Note:</b> The details tag is not supported in Internet Explorer.</p>
    </body>
</html>

Thuộc tính của thẻ details

  • open - chỉ định nội dung trong thẻ details sẽ được hiển thị cho người dùng.

Trình duyệt hỗ trợ

  • Chrome 12.0
  • Firefox 49.0
  • Safari 6.0
  • Opera 15.0

Tham khảo: w3schools.com

Nguồn: freetuts.net