本文原刊於 Rails Designer
多年來 HTML 和 CSS 已經變得越來越好，這已經不是什麼秘密了。雖然我已經開始喜歡寫 JavaScript，但只要我能逃脫懲罰，我就會這麼做。
典型的手風琴是不需要 JavaScript 的東西之一。這種元件很容易使用 Vue、Alpine 和 Stimulus 等 JS 框架創建，但對於最基本的版本，您不需要它們中的任何一個。要讓它們看起來不錯，您只需要 CSS。
這個例子就是我想要的。您會發現它不一定是典型的常見問題清單樣式。將其用於像這樣的部分，效果也非常好。
本文出自：
最基本的版本，如下：
它看起來是這樣的：
查看原始文章以取得實例。 ？
這不是最漂亮的，但很有效！
詳細資料/摘要元素有一些有趣的技巧。
檢查一下：
查看原始文章以取得實例。 ？
預設值看起來不太好，所以讓我們添加一些 CSS 以使內容更符合您的應用程式。關鍵部分是：
使用 Tailwind CSS 的完整版本如下：
你能用這個做什麼？例如，將 details 元素的狀態儲存在瀏覽器的 localStorage 中，以便其始終保持不變。讓我們用一個小的 Stimulus 控制器來看看：
需要另一個例子嗎？定價頁面上可以看到典型的常見問題清單樣式。
使用純 HTML 加入手風琴就是這麼簡單。您可以從非常簡單的開始，然後使用 CSS 添加一些視覺興趣，最後使用簡單的 Stimulus 控制器進行一些漸進增強。
以上是無需 JavaScript 的簡單手風琴的詳細內容。更多資訊請關注PHP中文網其他相關文章！
