免费在线手风琴折叠面板(Accordion) HTML/CSS 代码生成器，可视化创建可折叠内容面板，支持多开/单开模式、自定义颜色/间距/图标、动画过渡，一键复制 HTML+CSS 代码。纯前端本地运行。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用
Updated: 2026-07-11
8px
4px
编辑面板内容
实时预览
生成代码
...
💡 说明
1. 调整面板数量和样式参数
2. 编辑每个面板的标题和内容（支持HTML）
3. 实时预览 Accordion 效果
4. 选择查看 HTML / CSS / 完整代码，一键复制
❓ 常见问题
单开和多开模式有什么区别？
单开模式（Accordion）一次只能展开一个面板，展开新面板时自动关闭其他面板。多开模式（Collapsible）允许同时展开多个面板，每个面板独立开关。单开模式适合 FAQ 列表，多开模式适合分组内容展示。
生成的代码包含 JavaScript 吗？
生成的是纯 HTML+CSS 实现，使用 CSS :target 伪类或 checkbox hack 实现手风琴效果。无需 JavaScript，兼容性好。你也可以根据需要自行添加 JS 增强交互。
如何接入现有项目？
复制 HTML 和 CSS 代码到你的项目中即可。CSS 以 .accordion-xx 前缀命名，避免样式冲突。支持自定义主题色、圆角、间距等参数。