Native HTML5 Accordion

原生 HTML5 折叠内容

What is an Accordion? / 什么是折叠内容？

An accordion is a vertically stacked list of items that use show/hide functionality. Using the native <details> tag is the most accessible way to build this.

折叠内容是一个垂直堆叠的项目列表，具有显示/隐藏功能。使用原生的 <details> 标签是构建此功能最符合无障碍要求的方式。

Why use <details> over JavaScript? / 为什么要用 details 代替 JS？

JavaScript can fail to load or be blocked. The <details> element works even in the most restricted environments, ensuring your content is always reachable.

JavaScript 可能会加载失败或被拦截。而 <details> 元素即使在最受限的环境中也能正常工作，确保您的内容始终可达。

SEO Benefits / SEO 优势

Search engines like Baidu and Google index content inside <details> easily because it is standard HTML. There is no risk of content being "hidden" behind an unexecuted script.

百度和谷歌等搜索引擎可以轻松索引 <details> 内部的内容，因为它是标准 HTML。不存在内容被隐藏在未执行脚本之后的风险。

SEO Insight / SEO 优化见解

Indexing "Hidden" Content

Traditional JavaScript accordions often use display: none, which can signal to some crawlers that the content is low priority or should be ignored. By using the native <details> element, you signal that the content is a structural part of the document, ensuring it is fully indexed by both Google and Baidu even when "closed" on page load.

传统的 JavaScript 折叠面板通常使用 display: none，这可能会向某些爬虫发出信号，认为该内容优先级较低或应被忽略。通过使用原生的 <details> 元素，您可以表明该内容是文档的结构化组成部分，从而确保即使在页面加载时处于“关闭”状态，也能被谷歌和百度完整索引。

Zero Cumulative Layout Shift

Because the browser handles the state of native accordions internally, there is no delay caused by script execution. This eliminates "layout jumping" that often occurs when heavy JS libraries initialize, directly benefiting your Core Web Vitals scores and search rankings.

由于浏览器在内部处理原生折叠面板的状态，因此不存在脚本执行导致的延迟。这消除了大型 JS 库初始化时经常出现的“布局跳动”，直接提升了您的 核心网页指标 (Core Web Vitals) 评分和搜索排名。