Tạo một Accordion chỉ HTML để ẩn và hiển thị nội dung (Không có JS hoặc CSS)

in Tài nguyên & Công cụ

Bạn có biết rằng có một giải pháp HTML5 gốc để dễ dàng tạo một nút đọc thêm/bớt đàn accordion để ẩn và hiển thị nội dung với KHÔNG có JavaScript hoặc CSS. Đọc để tìm hiểu làm thế nào.

đàn xếp html5

Sản phẩm Các thẻ HTML5 chính thức là một phần tử tiện ích tiết lộ, nhưng kết hợp với Các thẻ HTML5 sẽ cung cấp cho bạn một đàn accordion chỉ thuần HTML.

Ý nghĩa không có JS HOẶC CSS là cần thiết. Thật tuyệt làm sao!

Đây là một ví dụ hiển thị một phần tử đơn giản với .

Đây là mã:

<details>
 <summary>Read More</summary>
  <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>

và đây là giao diện của nó:

Tìm hiểu thêm

Đây là một accordion HTML5 gốc để ẩn và tiết lộ nội dung. Khá tuyệt, phải không?

Học như thế nào? Sản phẩm  thẻ đóng vai trò như một trình bao bọc cho một phần tử có thể được mở hoặc đóng. Người dùng phải nhấp vào nhãn là để mở hoặc đóng phần tử.

Còn về phong cách và hành vi?

Phong cách

Bạn có thể áp dụng kiểu CSS để tùy chỉnh giao diện của hộp văn bản tiết lộ. Bên dưới cung cấp kiểu giao diện theo thẻ:

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

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

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

details[open] > summary {
  background-color: #ccf;
}

Theo mặc định, con trỏ xuất hiện giống như một mũi tên, nhưng nếu bạn muốn nó là một chỉ tay thay vào đó, hãy sử dụng cái này:

details {
cursor: pointer;
}

Hành vi

Việc thiết lập các hành vi là rất hạn chế, thực sự chỉ có một điều bạn có thể làm và đó là làm cho văn bản được tiết lộ mở theo mặc định.

Để bắt đầu đàn accordion ở trạng thái mở, hãy thêm Boolean mở thuộc tính nhãn:

<details open>
 <summary>Read More</summary>
  <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>
Tìm hiểu thêm

Đây là một accordion HTML5 gốc để ẩn và tiết lộ nội dung. Khá tuyệt, phải không?

Tôi có thể sử dụng những thuộc tính nào?

Các thuộc tính dưới đây có thể được sử dụng cho nhãn:

đặc tínhGiá trịTổng kết
mởmởMặc định là đừng mở.
id  giá trịCung cấp một số nhận dạng duy nhất.
tốt nghiệp lớp XNUMX  tên lớpGán tên lớp cho phần tử.
phong cách  CSS-giá trịGán các kiểu CSS cho phần tử.

Vậy những hạn chế là gì? Luôn luôn có một nắm bắt, phải không?

Không hỗ trợ cho Internet Explorer

Đàn accordion chỉ dành cho HTML5 này sẽ không hoạt động trong bất kỳ phiên bản Internet Explorer nào. Nếu bạn phải hỗ trợ IE11, bạn sẽ phải sử dụng một giải pháp dự phòng khác bằng cách sử dụng JQuery. Tất cả các trình duyệt khác đều hỗ trợ .

Không có hoạt ảnh hoặc chuyển tiếp tùy chỉnh

Mặc dù bạn có thể sửa đổi và tạo kiểu cho giao diện (như được hiển thị ở trên), nhưng bạn sẽ không thể thực hiện bất kỳ hoạt ảnh hoặc chuyển tiếp hiển thị văn bản nào. Nếu bạn muốn làm điều đó, bạn sẽ cần một giải pháp đàn accordion CSS/JSS khác.

Trình đọc màn hình và khả năng truy cập

Đây là bản địa HTML5 và nó * nên * có thể truy cập được nhưng đã phát hiện ra rằng văn bản được tiết lộ thực tế không phải lúc nào cũng được trình đọc màn hình thông báo một cách chính xác.

Tài liệu tham khảo:

về tác giả

Matt Ahlgren

Mathias Ahlgren là CEO và người sáng lập của Website Rating, chỉ đạo một đội ngũ biên tập viên và nhà văn toàn cầu. Ông có bằng thạc sĩ về khoa học và quản lý thông tin. Sự nghiệp của anh chuyển hướng sang SEO sau những trải nghiệm phát triển web ban đầu ở trường đại học. Với hơn 15 năm kinh nghiệm trong lĩnh vực SEO, tiếp thị kỹ thuật số và phát triển web. Trọng tâm của anh ấy cũng bao gồm bảo mật trang web, được chứng minh bằng chứng chỉ về An ninh mạng. Chuyên môn đa dạng này củng cố vai trò lãnh đạo của ông tại Website Rating.

Thông báo lưu trú! Tham gia bản tin của chúng tôi
Đăng ký ngay bây giờ và nhận quyền truy cập miễn phí vào các hướng dẫn, công cụ và tài nguyên chỉ dành cho người đăng ký.
Bạn có thể bỏ theo dõi bất cứ lúc nào. Dữ liệu của bạn được an toàn.
Thông báo lưu trú! Tham gia bản tin của chúng tôi
Đăng ký ngay bây giờ và nhận quyền truy cập miễn phí vào các hướng dẫn, công cụ và tài nguyên chỉ dành cho người đăng ký.
Bạn có thể bỏ theo dõi bất cứ lúc nào. Dữ liệu của bạn được an toàn.
Chia sẻ với...