使用 Details 與 Summary 製作原生手風琴 (含收合動畫！)

#111

Linux Snap (VSCode) 無法輸入中文字
#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 Smell （代碼異味）模式的網站 - 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

什麼是 ARIA - Accessible Rich Internet Applications？
#89

什麼是無障礙網頁？
#88

怎麼讓外網連結本地網站與伺服器？
#87

開發者寫作三要素：清晰、個性、一致性
#86

為什麼 TypeScript 中 Object.keys 接受任何物件都只返回 string[] 型別？
#85

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

即拿即用的數位花園模板 —— Quartz
#83

測試代碼應該與被測試系統有相同程度的抽象
#82

網頁黏性卷軸滑動 —— scroll-snap-type
#81

如何直接修改專案依賴套件原始碼（node_modules）？
#80

為什麼瀏覽器 Tab 按下去會顯示藍藍的外框？
#79

最有效率提升網頁速度的方式是改善內容，網站加載時間 -50% 也不是夢
#78

Editor.js 打造類似 Notion 的區塊編輯器體驗
#77

我的部落格 About Page 沒有用處，所以把它砍了
#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 在網頁中加入各式各樣的圖示

Linux Snap (VSCode) 無法輸入中文字

TypeScript 驗證型別是否完全相同的思考（Freshness 概念）

使用 Details 與 Summary 製作原生手風琴 (含收合動畫！)

最佳化網頁資產載入 (preload, prefetch, dns-prefetch, preconnect)

TypeScript 是個 Linter 嗎？怎麼看待 TS？

紀載大量 Code Smell （代碼異味）模式的網站 - 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 是好是壞？

網頁色彩對比度怎麼規範？

什麼是 ARIA - Accessible Rich Internet Applications？

什麼是無障礙網頁？

怎麼讓外網連結本地網站與伺服器？

開發者寫作三要素：清晰、個性、一致性

為什麼 TypeScript 中 Object.keys 接受任何物件都只返回 string[] 型別？

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

即拿即用的數位花園模板 —— Quartz

測試代碼應該與被測試系統有相同程度的抽象

網頁黏性卷軸滑動 —— scroll-snap-type

如何直接修改專案依賴套件原始碼（node_modules）？

為什麼瀏覽器 Tab 按下去會顯示藍藍的外框？

最有效率提升網頁速度的方式是改善內容，網站加載時間 -50% 也不是夢

Editor.js 打造類似 Notion 的區塊編輯器體驗

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

前端怎麼看 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 如何管理大型檔案？