HTML5のdetailsとsummaryタグで作る簡単アコーディオン

HTML5にはCSSやJavascriptを使わなくても簡単なアコーディオンを作ることができます。

その方法はdetailsとsummaryタグを使う方法です。

detailsタグとsummaryタグでアコーディオンを作る

HTML5でアコーディオンを作れるdetailsタグとsummaryタグ。使い方は簡単でアコーディオンにしたい全体をdetailsタグを括って、閉じた時に見えるタイトルをsummaryタグで括って書くだけです。

実際にdetailsタグとsummaryタグを使って以下のようなアコーディオンを作ります。

アコーディオンサンプル

ここはクリックされた時に表示されます。

HTMLは

<details>
<summary>アコーディオンサンプル</summary>
<p>>ここはクリックされた時に表示されます。</p>
</details>

とdetailsタグで標題のsummaryタグと表示したい内容を囲むだけです。

detailsタグ内にはtableタグたDLタグ、DDタグ、OLタグ、ULタグ、LIタグなどほぼすべてのタグを含むことができます。

detailsタグとsummaryタグハCSSやJavascriptを利用せずにアコーディオンウを作成できるので、ちょっとした内容を隠したり表示したりするのに便利です。

以上、HTML5のdetailsとsummaryタグで作る簡単アコーディオンでした。