使用 Details 与 Summary 制作原生手风琴 (含收合动画！)

#110

TypeScript 验证类型是否完全相同的思考（Freshness 概念）
#109

使用 Details 与 Summary 制作原生手风琴 (含收合动画！)

手风琴通常指一系列垂直堆叠标题可用于展开收合不同信息的 UI 模式，在早期会需要用 JS 制作开合状态，动画更是需要计算开合后的高度并制作动画。

幸亏在 HTML 当中有项新颖的语法 <details> 和 <summary> 可以帮助我们快速实现类似的功能，并且配合上新的 CSS interpolate-size 和 transition-behavior 制作滑顺的展开闭合动画。

翻了一下相关文件并制作了一个最小可行的手风琴含动画。要留意动画相关语法大致只有 Chromium 引擎浏览器支持，是个不错可以渐进增强加入的小功能。

延伸阅读：使用 Details 与 Summary 制作原生手风琴 (含收合动画！)🔗
#108

优化网页资产加载 (preload, prefetch, dns-prefetch, preconnect)
#107

TypeScript 是个 Linter 吗？怎么看待 TS？
#106

记录大量代码异味模式的网站 - Code Smells Catalog
#105

为什么应该用 pnpm？
#104

针对开发者提供定制化新闻提要与社区 - Daily.dev
#103

为什么要在 Vite 项目设置使用绝对路径 import
#102

DOM 过大对网页的影响
#101

Print QR Codes - 简单快速生成 QR Code 供输出用
#100

最近翻 Tailwind 文件发现 4.0 版网站风格大改，变得很 Vercel 感？
#99

如何保持习惯动力？
#98

浏览器输入 URL 搜索后发生了什么事？
#97

如何架构一个超赞的前端项目于 2025 年
#96

网页东东 Threads 订阅人数突破千人！
#95

学会新概念 Backend for Frontend (BFF)
#94

撰写自动化发布语义化版本 TypeScript NPM 套件
#93

在线文件结构 ASCII 图生成器
#92

Git Pre-Commit Hook 是好是壞？
#91

网页色彩对比度怎么规范？
#90

什么是无障碍网页？
#89

怎么让外网连结本地网站与伺服器？
#88

开发者写作三要素：清晰、个性、一致性
#87

为什么 TypeScript 中 Object.keys 接受任何对象都只返回 string[] 类型？
#86

借助 GPT-4o 用不到 0.1 美元在 2 天内翻译了 168 篇部落格短文
#85

即拿即用的数字花园模板 —— Quartz
#84

测试代码应该与被测试系统有相同程度的抽象
#83

网页黏性卷轴滑动 —— scroll-snap-type
#82

如何直接修改项目依赖包原始代码（node_modules）？
#81

为什么浏览器 Tab 按下去会显示蓝蓝的外框？
#80

最有效率提升网頁速度的方式是改善内容，网站加载时间 -50% 也不是梦
#79

Editor.js 打造类似 Notion 的区块编辑器体验
#78

我的部落格 About Page 没有用处，所以把它砍了
#77

什么是 ARIA - Accessible Rich Internet Applications？
#76

前端怎么看 SEO？
#75

浏览器缩放与显示误差
#74

Intersection Observer 真实案例：自动更新目录
#73

用二维角度思考网页布局
#72

开发者生产力迷思：估算 = 终点
#71

开发者生产力迷思：故事点 = 生产力
#70

开发者生产力迷思：低缺陷 = 生产力
#69

开发者生产力迷思：程序行数 = 生产力
#68

开发者生产力迷思：工作时数 = 生产力
#67

如何管理通用工具函式 (Utility Function)
#66

把 AI 放上 CI - PR Agent
#65

CSS blur() 在 Safari 上要留意的效能问题
#64

往返快取（bfcache）造成前后页面状态问题
#63

什么是桶文件（Barrel File）模式？
#62

了解网页元件化的未来：Web Components
#61

如果不知道自己在干嘛，那大概也没人知道。
#60

为什么要替软件进行测试？
#59

了解 ES6 JavaScript 当中的内建数据结构： Map
#58

前端最有感的的快捷鍵
#57

为什么专案时间预估这么难？
#56

管理 Tailwind 当中的变量可以这样做
#55

具体来说可以怎么建立与管理数字产品的 UI 变量
#54

不要告诉使用者「查看更多」
#53

如何透过 CSS Grid 让元素跳脱容器
#52

生成假资料可以用 TestDataHub
#51

为什么前端生态整体体验迈向 😐
#50

CSS 属性的最大值
#49

替文件增添互动性避免枯燥
#48

在 .gitattributes 设置 Linguist 改变项目语言统计
#47

用正確的方式制作深色模式（或任何网站风格🌞）
#46

前端与开发环境多样性
#45

Cypress 與 jQuery
#44

关于 Low-code / No-code
#43

我透过网页升学的故事
#42

「优雅降级」与「渐进增强」差异在哪？
#41

好奇不同種類色盲眼中的網站是长什么样子？
#40

解决问题的技巧
#39

已经 2024 了，会需要学 Sass 吗？
#38

什么事情在你的工作领域是 common sense 但别人知道了却很讶异
#37

iOS Home Indicator 安全区域 CSS 处理
#36

发现特别是技术类作者会把文章放置在不只一个地方
#35

那个酷酷的网页背景是怎么做到的？
#34

为什么要保持套件版本更新？
#33

你还记得浏览器引擎前缀 (Vendor Prefix) 吗？
#32

Git 如何管理大型档案？
#31

XML 和 AJAX
#30

重新思考如何建构 RWD 网页，透过 CSS Container Queries
#29

听名称就感觉生产力 UP UP 的字体 —— Commit Mono
#28

近期发现不错的免费英文网页开发教学平台 —— Egghead.io
#27

为什么会有 _ 在数字当中？
#26

如何从 Git 历史中彻底移除机密文件？
#25

软件园艺家 Software Gardener
#24

一直以为 PowerShell 就是蓝蓝的 cmd
#23

分享一个我自己在预览 GitHub 专案时常用的诀窍 —— 点
#22

追蹤浏览器版本支持程度 —— Can I Use 网站
#21

Chromium 开发者工具 —— Layers
#20

可视化 JSON 数据 - JSON Crack
#19

不知道不同团队是如何巩固与记录开发制度的？
#18

处理金钱、单位、时间的转换原生 JavaScript 就办得到
#17

关于纯手工
#16

想要快速视觉化网页元素之间的边界可以怎么做？
#15

资料库图示的来由
#14

想要及时编辑预览网页内容可以怎么做？
#13

你能说明设计系统与元件库在网页领域中的差异吗？
#12

举例 Radix、Headless UI，为什么无样式元件这么热门？
#11

关于写作
#10

建构正确的网页 UI 不应该是个麻烦的问题
#9

AI 取代人类的恐惧
#8

如何验证客户端资料的正确性
#7

关于经营博客
#6

制作了博客想要额外添加文章搜索功能该怎么办？
#5

推荐免费网页图片编辑器 —— Photopea
#4

你有多久没有升级专案的套件版本了呢？
#3

与朋友的 TDD 观念闲谈
#2

你会如何解这个下拉式选单样式问题呢？
#1

使用 Iconify 在网页中加入各式各样的图示

TypeScript 验证类型是否完全相同的思考（Freshness 概念）

使用 Details 与 Summary 制作原生手风琴 (含收合动画！)

优化网页资产加载 (preload, prefetch, dns-prefetch, preconnect)

TypeScript 是个 Linter 吗？怎么看待 TS？

记录大量代码异味模式的网站 - Code Smells Catalog

为什么应该用 pnpm？

针对开发者提供定制化新闻提要与社区 - Daily.dev

为什么要在 Vite 项目设置使用绝对路径 import

DOM 过大对网页的影响

Print QR Codes - 简单快速生成 QR Code 供输出用

最近翻 Tailwind 文件发现 4.0 版网站风格大改，变得很 Vercel 感？

如何保持习惯动力？

浏览器输入 URL 搜索后发生了什么事？

如何架构一个超赞的前端项目于 2025 年

网页东东 Threads 订阅人数突破千人！

学会新概念 Backend for Frontend (BFF)

撰写自动化发布语义化版本 TypeScript NPM 套件

在线文件结构 ASCII 图生成器

Git Pre-Commit Hook 是好是壞？

网页色彩对比度怎么规范？

什么是无障碍网页？

怎么让外网连结本地网站与伺服器？

开发者写作三要素：清晰、个性、一致性

为什么 TypeScript 中 Object.keys 接受任何对象都只返回 string[] 类型？

借助 GPT-4o 用不到 0.1 美元在 2 天内翻译了 168 篇部落格短文

即拿即用的数字花园模板 —— Quartz

测试代码应该与被测试系统有相同程度的抽象

网页黏性卷轴滑动 —— scroll-snap-type

如何直接修改项目依赖包原始代码（node_modules）？

为什么浏览器 Tab 按下去会显示蓝蓝的外框？

最有效率提升网頁速度的方式是改善内容，网站加载时间 -50% 也不是梦

Editor.js 打造类似 Notion 的区块编辑器体验

我的部落格 About Page 没有用处，所以把它砍了

什么是 ARIA - Accessible Rich Internet Applications？

前端怎么看 SEO？

浏览器缩放与显示误差

Intersection Observer 真实案例：自动更新目录

用二维角度思考网页布局

开发者生产力迷思：估算 = 终点

开发者生产力迷思：故事点 = 生产力

开发者生产力迷思：低缺陷 = 生产力

开发者生产力迷思：程序行数 = 生产力

开发者生产力迷思：工作时数 = 生产力

如何管理通用工具函式 (Utility Function)

把 AI 放上 CI - PR Agent

CSS blur() 在 Safari 上要留意的效能问题

往返快取（bfcache）造成前后页面状态问题

什么是桶文件（Barrel File）模式？

了解网页元件化的未来：Web Components

如果不知道自己在干嘛，那大概也没人知道。

为什么要替软件进行测试？

了解 ES6 JavaScript 当中的内建数据结构： Map

前端最有感的的快捷鍵

为什么专案时间预估这么难？

管理 Tailwind 当中的变量可以这样做

具体来说可以怎么建立与管理数字产品的 UI 变量

不要告诉使用者「查看更多」

如何透过 CSS Grid 让元素跳脱容器

生成假资料可以用 TestDataHub

为什么前端生态整体体验迈向 😐

CSS 属性的最大值

替文件增添互动性避免枯燥

在 .gitattributes 设置 Linguist 改变项目语言统计

用正確的方式制作深色模式（或任何网站风格🌞）

前端与开发环境多样性

Cypress 與 jQuery

关于 Low-code / No-code

我透过网页升学的故事

「优雅降级」与「渐进增强」差异在哪？

好奇不同種類色盲眼中的網站是长什么样子？

解决问题的技巧

已经 2024 了，会需要学 Sass 吗？

什么事情在你的工作领域是 common sense 但别人知道了却很讶异

iOS Home Indicator 安全区域 CSS 处理

发现特别是技术类作者会把文章放置在不只一个地方

那个酷酷的网页背景是怎么做到的？

为什么要保持套件版本更新？

你还记得浏览器引擎前缀 (Vendor Prefix) 吗？

Git 如何管理大型档案？

XML 和 AJAX