Các phần tử tương tác

6.1 Thẻ <details>

HTML5 đã thêm các phần tử <details> và <summary>, được sử dụng để tạo các khối tương tác có thể mở ra hoặc thu nhỏ. Những phần tử này cho phép người dùng mở và đóng nội dung, cải thiện tương tác người dùng và tiết kiệm không gian trên trang web.

Phần tử <details> được sử dụng để tạo khối có thể mở hoặc thu gọn. Bên trong nó có thể chứa bất kỳ nội dung HTML nào. Khi mở <details> sẽ hiển thị nội dung bên trong, còn khi thu nhỏ thì sẽ ẩn.

Cú pháp:

    
      <details>
        <summary>Tiêu đề</summary>
        <!-- Nội dung ẩn -->
      </details>
    
  

Thuộc tính open:

Nếu thuộc tính này có mặt, khối <details> sẽ mở ra mặc định.

Ví dụ về sử dụng <details>

    
      <details open>
        <summary>Thông tin cơ bản</summary>
        <p>Thông tin này được hiển thị mặc định vì thuộc tính open được thiết lập.</p>
      </details>
    
  

Giải thích

• <details>: tạo container cho nội dung ẩn.
• <summary>: xác định tiêu đề luôn hiển thị và có thể nhấn vào để mở hoặc thu gọn nội dung.

6.2 Thẻ <summary>

Phần tử <summary> được sử dụng bên trong <details> để tạo tiêu đề. Tiêu đề này luôn hiển thị và đóng vai trò như một phần tử điều khiển để mở hoặc thu gọn nội dung của khối <details>.

Cú pháp:

    
      <details>
        <summary>Tiêu đề</summary>
        <!-- Nội dung ẩn -->
      </details>
    
  

Ví dụ sử dụng:

    
      <details>
        <summary>Chi tiết hơn</summary>
        <p>Đây là nội dung ẩn, sẽ hiển thị khi mở khối.</p>
      </details>
    
  

Lợi ích của việc sử dụng <details> và <summary>

1. Cải thiện trải nghiệm người dùng: người dùng có thể tự điều khiển xem nội dung nào mà họ muốn thấy.
2. Tiết kiệm không gian: ẩn thông tin lớn đằng sau tiêu đề tương tác.
3. Đánh dấu sematic: cải thiện cấu trúc tài liệu HTML và tăng tính khả dụng của nó đối với người dùng và các công cụ tìm kiếm.

6.3 Tương tác với JavaScript

Các phần tử <details> và <summary> có thể dễ dàng điều khiển bằng JavaScript để tạo các trang web tương tác hơn.

Ví dụ sử dụng JavaScript:

    
      <details>
        <summary>Chi tiết hơn</summary>
        <p>Đây là nội dung ẩn, sẽ hiển thị khi mở khối.</p>
      </details>
      <details open>
        <summary>Thông tin cơ bản</summary>
        <p>Thông tin này được hiển thị mặc định vì thuộc tính open được thiết lập.</p>
      </details>
      <button id="toggleDetails">Thu gọn/mở rộng</button>
    
  

    
      // Tìm nút với id 'toggleDetails' và thêm sự kiện 'click'
      document.getElementById('toggleDetails').addEventListener('click', () => {
        // Tìm tất cả phần tử 'details' trên trang
        document.querySelectorAll('details').forEach(detail => {
          // Đảo ngược giá trị của thuộc tính 'open' cho mỗi phần tử 'details'
          detail.open = !detail.open; 
        });
      });
    
  

Giải thích:

• Nút "Thu gọn/mở rộng": quản lý trạng thái của tất cả các phần tử <details> trên trang
• Sự kiện click: chuyển đổi thuộc tính open cho tất cả các phần tử <details>