details タグを利用したアコーディオンパネルのコードと表示結果を紹介します。
この記事ではJavaScriptやCSSを利用しない、detailsタグを利用した実装を紹介します。
機能はシンプルですがタグを記述するのみで実装できる方法です。
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>アコーディオンパネルのデモ</h1>
<details>
<summary>コンテンツを表示</summary>
<p>コンテンツ1です。</p>
<p>コンテンツ2です。</p>
<p>コンテンツ3です。</p>
<div style="height:400px;background-color:#ffd800;">大きな枠です。</div>
<p>コンテンツ4です。</p>
<p>コンテンツ5です。</p>
<p>コンテンツ6です。</p>
<div style="height:400px;background-color:#b6ff00;">中サイズの枠です。</div>
<p>コンテンツ7です。</p>
<p>コンテンツ8です。</p>
<p>コンテンツ9です。</p>
<p>コンテンツ10です。</p>
</details>
</body>
</html>
detailsタグがアコーディオンパネルになります。summaryタグに閉じられている状態の見出しを記述します。detailsタグ内にコンテンツを記述します。
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
[コンテンツを表示]部分をクリックします。
クリックすると内部のコンテンツが表示された状態になります。
もう一度クリックすると、コンテンツが折りたたまれた状態になります。
