Tìm hiểu về thẻ “details” và “summary” trong HTML5

Bài viết phân tích và hướng dẫn sử dụng hai thẻ details và summary trong HTML5

Sử dụng details

Thành phần thẻ details có thể được sử dụng ở bất cứ đâu trong cặp thẻ body commande viagra sans ordonnance. Ví dụ:

Ở ví dụ trên cho chúng ta thấy thành phần thẻ details bao gồm một đoạn văn bản, về cơ bản mặt hiển thị khi chúng ta chạy trên trình duyệt thì chưa có gì cả. Ngoài ra, bên trong thẻ details chúng ta cũng có thể sử dụng các thẻ khác của HTML5 như figure hoặc một số thành phần của form như các thẻ input, textarea…
Sự khác nhau đáng kể duy nhất là mặt hiển thị trên các cửa sổ trình duyệt khác nhau. Ở các trình duyệt mới nhất như Google Chrome, Firefox, Opera nó sẽ hiển thị thêm một nút tam giác ở đầu cạnh.

Thẻ details làm việc như một accordion trong jquery, chuyển qua chuyển lại mũi tên, hoặc nhấp chuột vào bất cứ nơi nào mà chiều ngang thẳng hàng với mũi tên, sẽ tiết lộ nội dung ẩn. Chúng ta có thể sử dụng phím Tab để di chuyển giữa các thành phần này, sau đó có thể nhấn phím space hoặc Enter để mở nội dung ẩn

Bạn cũng có thể thêm thuộc tính open để mặc định hiển thị một thành phần nào đó

Thẻ summary

Thẻ details có thể có cả thẻ summary đi kèm, nhưng th

Với đoạn code trên ta sẽ được kết quả như hình dưới

Bạn cũng có thể đặt các thẻ details dạng lồng nhau

Khi đó chúng ta sẽ có dạng kích mở 2 lần.

Style Details với CSS

2 thẻ details và summary có thể được style bằng css như các thẻ bình thường khác

Style dấu tam giác

Các bạn cũng có thể thay cái dấu tam giác ở đầu đi bằng đoạn css sau

Sự hỗ trợ của các trình duyệt

Ví dụ ứng dụng

Bạn có thể thấy ví dụ ứng dụng thông qua bức ảnh sau

Thẻ details được dùng để trình bày phần menu bên trái của website, nhìn rất hay đấy chứ.

Tổng kết

Với các thẻ này, hy vọng một ngày nào đó nó sẽ chạy độc lập với các thư viện javascript trong việc thiết kế các accordion.
Vậy website của bạn đã sử dụng cặp thẻ details và summary chưa?