Accordion (Disclosure) 手风琴 Accordion（披露式展开 Disclosure） web
Stacked sections whose headings expand and collapse their content
堆叠的分区，点标题即可展开或收起对应内容
A reusable piece of interface with its own structure and behavior.
A named value for color, spacing, type, or another design decision.
Shared names make design and implementation prompts precise.
标本可交互 —— 点点看。Specimen is live — try it.
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Disclosure trigger披露触发器
<summary>“The FAQ question you click to open the answer” is the disclosure trigger.
「FAQ 里点开答案的那个问题」就是披露触发器。
Prompt fragmentPrompt 片段the <summary> disclosure trigger spanning the accordion heading row
<summary> 披露触发器，铺满手风琴的标题行
-
2 Disclosure indicator披露指示符
<summary>::marker“The little chevron that turns when the row opens” is the disclosure indicator.
「行展开时会转动的小箭头」就是披露指示符。
Prompt fragmentPrompt 片段the <summary>::marker disclosure indicator rotating between the closed and open states
<summary>::marker 披露指示符，在关闭和打开状态之间旋转
-
3 Disclosure panel披露面板
<details>“The answer area that pushes everything down” is the disclosure panel.
「一展开就把下面内容全顶下去的答案区」就是披露面板。
Prompt fragmentPrompt 片段the <details> disclosure panel revealed directly beneath its summary heading
<details> 披露面板，在它的 summary 标题正下方展开
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Build an Accordion from <details> and <summary> elements. Give grouped <details> elements the same name when only one section may be open, preserve native keyboard behavior, and animate the revealed panel without adding redundant aria-expanded; use aria-expanded only for a fully custom disclosure primitive.
用 <details> 和 <summary> 元素构建手风琴。同一时刻只允许展开一个分区时，给成组的 <details> 元素相同的 name；保留原生键盘行为；给展开的面板加动画，但不要画蛇添足地加 aria-expanded——只有完全自研的披露原语才需要 aria-expanded。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my accordion (details/summary, Radix Accordion). Rule out: height auto refusing to animate — animate grid-template-rows 0fr to 1fr or use interpolate-size; single vs multiple type letting two panels open when one was intended; the default disclosure marker still rendering next to a custom icon; focus landing inside a closed panel because contents were hidden with opacity instead of display. The symptom:
调试我的手风琴（details/summary、Radix Accordion）。排查：height: auto 没法做动画——改用 grid-template-rows 从 0fr 到 1fr 的动画，或用 interpolate-size；single 和 multiple 类型弄混，本只想开一个面板却开了两个；自定义图标旁边还渲染着默认的披露标记；焦点落进已关闭的面板，因为内容是用 opacity 而不是 display 隐藏的。症状：
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| HTML | <details> | |
| HTML | <summary> | |
| HTML | name | groups details elements so only one is open把多个 details 元素编成一组，同时只开一个 |
| Radix | Accordion |