[HTML] detailsとsummaryタグでアコーディオン（開閉）コンテンツを作る

htmlの<details>タグと<summary>タグタグを使えば、簡単に開閉コンテンツが作成できます。

details、summaryタグとは

<details>タグはHTML5で導入された要素で、開閉可能なコンテンツを作成するために使用します。
通常、子要素として<summary>タグを含み、<summary>の内容がキャプションとして表示されます。
クリック（タップ）すると、詳細内容を表示したり非表示にしたりできます。

details と summary を使うメリットとデメリット

<dl>、<dt>、<dd>タグ等を使い、JavaScriptやjQueryとの組み合わせで似たような開閉機能を実現することもできますが、details と summary を使うことのメリットとデメリットについて説明します。

メリット

・HTML構造の正しさ（セマンティクス）
<details> は「詳細情報を開閉する要素」、<summary>は「開閉ボタンの役割」として、ブラウザやスクリーンリーダーに意味のある情報を適切に伝えることができます。

・キーボード操作 & アクセシビリティ
<summary> はキーボード操作（Enterキー や Spaceキー）で開閉でき、スクリーンリーダーなどで「開いている」「閉じている」状態を正しく伝えることができます。

・JavaScript、jQuery なしでも最低限の機能が動作
JavaScriptやjQueryが無効な環境でも、開閉機能は基本的に動作します。
（ただし、display: none; で要素を非表示にしている場合は除きます）

デメリット

・<summary> の三角アイコンを消したり、スタイルを調整する手間が必要
<summary> にデフォルトで表示される三角アイコンを消したり、アイコンの位置や色などをカスタマイズする際に、CSSで調整が必要です。

details、summaryタグの使い方

See the Pen
Untitled by mkl may (@mkl-may)
on CodePen.

summaryタグがない場合の表示

See the Pen
Untitled by mkl may (@mkl-may)
on CodePen.

任意のキャプションを付けることができず、「詳細」と表示されます。

初期状態をアコーディオンを開いた状態にする

detailsタグにopen属性を付与すると、初期状態をアコーディオンを開いた状態にすることができます。

See the Pen
[HTML] details , open by mkl may (@mkl-may)
on CodePen.

details、summaryタグのCSSスタイリング

三角形アイコンを消す

初期値の display: list-item で三角形アイコンが表示されている状態なので、display: list-item;以外を指定してデフォルトの三角形アイコンを消します。

hoverの際のポインター（指さしマーク）指定

開閉アイコンのカスタマイズ

初期値の三角矢印を消したうえで、疑似要素などを使ってアイコンや画像を表示させます。

See the Pen
Untitled by mkl may (@mkl-may)
on CodePen.

アコーディオンオープン時アニメーション

See the Pen
[HTML] details , animation by mkl may (@mkl-may)
on CodePen.

※ただし、上記の方法では最初の1回しかアニメーションになりません。
毎回アニメーションさせるにはJavascriptを併用する必要がありそうです。

完成形

See the Pen
[HTML] details 完成形 by mkl may (@mkl-may)
on CodePen.

details、summaryタグ＋jQueryでスムーズに開閉するアコーディオン

こちらの記事で、jQueryを追加してスムーズに開閉するアコーディオンをご紹介しています。
※jQueryが効かない環境でも、details と summary の元々の開閉機能が動作する仕様となっています。