HTML・CSSだけでアコーディオンを作る

こんにちは、クリエイターズメモです。

ページが長くなりそうなとき、開閉できるコンテンツ（以下、アコーディオン）を作りたいと思うときってありますよね。

ですが「作るの大変そう」、「作れるけど面倒」、「そもそもjavascriptとかよくわからない」などと思ってしまう方も多いかと思います。

なので今回はjavascriptを使用しないでさくっとHTML・CSSだけでアコーディオンを作る方法を紹介します。

方法は他にもありますが、これが一番簡単な方法だと思います。

まず注意点としてこの方法はIEに対応していません、IEでは最初から開いている状態となってしまいます。
以下、対応ブラウザをご確認ください。

→対応ブラウザ（Can I use…）

現状ではIE以外のブラウザはほぼサポートされています。

では実装していきます。まずは完成したDEMOをご覧ください。

→DEMO

必要な部分のソースは以下となります。

■HTML

アコーディオンにしたい部分を<details>で囲います。
そして、閉じているときに見せたい部分を<summary>で囲います。

なんとこれだけ！あとは簡単にCSSで装飾してみたいと思います。

■CSS

このような感じにしてみました。IEさえ無視してしまえばこんな簡単な方法でも実装できます。
ただ、IE11のサポートがすべて終わるのはかなり先の話ですね。

IEに対応させるためのプラグインもいくつかあるみたいなので、必要な方はそちらも合わせてご利用ください。

以上、クリエイターズメモでした。