Hiển thị tóm tắt (summary) cho <details> trong HTML5

Thẻ <summary> định nghĩa tiêu đề có thể click để mở/đóng nội dung <details> - không cần JavaScript.

Ví dụ

<!DOCTYPE html>
<html>
<head>
  <title>HTML Summary Tag</title>
  <style>
    details { border: 1px solid #ddd; border-radius: 8px; margin: 10px 0; overflow: hidden; }
    summary { 
      padding: 15px 20px; background: #f8f9fa; cursor: pointer; font-weight: 600;
      list-style: none; /* Ẩn marker mặc định */
    }
    summary::-webkit-details-marker { display: none; } /* Chrome/Safari */
    summary::after { content: "▼"; float: right; transition: transform 0.2s; }
    details[open] summary::after { transform: rotate(180deg); }
    details > *:not(summary) { padding: 0 20px 20px; }
  </style>
</head>
<body>
  <details>
    <summary>Thông tin chi tiết (Click để mở)</summary>
    <p>Nội dung chi tiết được ẩn/hiện khi click vào summary. Không cần JavaScript!</p>
    <p>Có thể chứa bất kỳ HTML nào: danh sách, bảng, form, ảnh...</p>
  </details>
  
  <details open>
    <summary>Mặc định mở (open attribute)</summary>
    <p>Nội dung này hiển thị ngay khi load trang.</p>
  </details>
</body>
</html>

Kết quả

• Click "Thông tin chi tiết" → mở/đóng nội dung, mũi tên xoay
• Block thứ 2 có open attribute → hiển thị ngay

Thuộc tính <details>

• open: Mặc định mở

Truy cập DOM

const details = document.querySelector('details');
details.open = true; // Mở
details.open = false; // Đóng
details.addEventListener('toggle', e => console.log(details.open ? 'Mở' : 'Đóng'));