よくありそうな構成のアコーディオン (開閉式) UI を details 要素で実装したサンプルを GitHub に上げたので共有しつつ、details 要素使用時の注意点やスタイリングに関するまとめ。 開閉式のウィジェット、所謂アコーディオン UI を実装する手段として、details 要素を使用する方法は面倒な JavaScript を記述する必要もなく、(正しい構文で HTML を記述すれば) アクセシビリティ的な問題も気にせず簡単に実装することが可能なためよく利用しますが、よくありそうな構成のアコーディオン UI を details 要素で実装したサンプルを GitHub に上げたので共有します。 デモページは GitHub Pages で公開しているので下記から確認できます。 details 要素を使用したアコーディオン UI の実装サンプル burnworks/details-